用Javascript更改iframe src

我試圖在有人單擊單選按鈕時更改iframe src。出於某種原因，我的代碼無法正常工作，我無法找出原因。以下是我有：用Javascript更改iframe src

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
    <title>Untitled 1</title> 
 

 
    <script> 
 
    function go(loc) { 
 
    document.getElementById('calendar').src = loc; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe> 
 

 
    <form method="post"> 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month 
 
    </form> 
 

 
</body> 
 

 
</html>

來源

2010-09-16 shinjuo

@Pekka這就是爲什麼它是一個註釋解決這個問題。 – mbq 2010-09-16 20:22:51

@mbq不，我的意思是在這種情況下這是一個非常糟糕的主意。 OP似乎在嵌入來自外部服務的代碼。由於跨域安全性，您無法首先使用AJAX獲取該內容，即使可以，將HTML放入DIV也不行，因爲它可能包含對圖像和樣式表的相對引用，這樣。 IFrames真的是我想去的地方 – 2010-09-16 20:29:52

@Pekka我同意;我錯過了那個遠程服務部分。我刪除了我的評論，不要混淆人。 – mbq 2010-09-16 23:23:59

在這種情況下，有可能是因爲你在這裏使用了錯誤的括號：

document.getElementById['calendar'].src = loc;

應該

document.getElementById('calendar').src = loc;

來源

2010-09-16 19:43:55

我改變了它，它仍然沒有工作。 – shinjuo 2010-09-16 19:45:05

+11

@shinjuo'onselect'不是在此使用的正確屬性。你可能想使用'onclick' - 注意，雖然這不會觸發，如果用戶使用他們的鍵盤 – 2010-09-16 19:46:01

這就是它。謝謝。我選擇select的原因是因爲我認爲，如果有人通過鼠標點擊並點擊空間，它仍然會改變 – shinjuo 2010-09-16 19:47:52

onselect必須是onclick。這將適用於鍵盤用戶。

我還建議將<label>標記添加到「日」，「月」和「年」的文本中，以便於點擊。示例代碼：

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/><label for="day">Day</label>

我也建議屬性onclick和值之間取出的空間，但它可以通過瀏覽器解析：

<input name="calendarSelection" type="radio" onclick = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

應該是：

<input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

來源

2010-09-16 19:50:28

不正確。 http://stackoverflow.com/questions/828262 – nalply 2012-04-05 18:17:17

@nalply - 我不明白你downvote。根本問題不是空間，我說*應該*改變。問題是onselect應該是onclick。還要注意Pekka的其他答案不能解決問題。我會重新排列我的答案，使其更清晰。 – 2012-04-26 20:21:01

我刪除了downvote，因爲你的新編輯比以前更清晰。 – nalply 2012-04-27 13:15:02

也許這可能會有幫助...這是純HTML - 無javascript：

<p>Click on link bellow to change iframe content:</p> 
 
<a href="http://www.bing.com" target="search_iframe">Bing</a> - 
 
<a href="http://en.wikipedia.org" target="search_iframe">Wikipedia</a> - 
 
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe) 
 

 
<iframe src="http://en.wikipedia.org" width="100%" height="100%" name="search_iframe"></iframe>

順便說一些網站不允許你在iframe中打開它們（安全原因 - 點擊劫持）

來源

2013-07-11 14:57:19 inemanja

這裏是jQuery的方式做到這一點：

$('#calendar').attr('src', loc);

來源

2013-12-24 14:50:34

這應該也行，雖然src將保持不變：

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";

來源

2014-10-14 00:13:30

當iframe中的頁面位於不同的域時，這不起作用。 – 2014-10-23 17:06:04

-1

您可以通過iframe中的JavaScript

document.write(" <iframe id='frame' name='frame' src='" + srcstring + "' width='600' height='315' allowfullscreen></iframe>");

來源

2017-06-05 14:44:16

用Javascript更改iframe src

回答

相關問題