如何訪問iframe元素

我有以下的html和javascript。如果我點擊模擬事件，我希望HandleEvents函數將文本發佈到「子」頁面html中。所以我基本上試圖鎖定到一個父元素的子網頁內的HTML元素。如何訪問iframe元素

我該怎麼做？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<script type="text/javascript"> 

function _bindEvent(el, eventName, eventHandler) { 
     if (el.addEventListener){ 
      el.addEventListener(eventName, eventHandler, false); 
     } else if (el.attachEvent){ 
      el.attachEvent('on'+eventName, eventHandler); 
     } 
} 

function doconfigure() { 
    var ifrm = document.getElementById('ifrm'); 
    if(ifrm) { 
     ifrm.src="configure.html"; 
    } 
} 

function doevents() { 
    var ifrm = document.getElementById('ifrm'); 
    if(ifrm) { 
     ifrm.src="show_events.html"; 
    } 
} 

function dooutbound() { 
     var ifrm = document.getElementById('ifrm'); 
     if(ifrm) { 
      ifrm.src="outbound.html"; 
     } 
} 

function HandleEvents(data) { 

    //post data to show_events.html page 
    var ifrm = document.getElementById('ifrm'); 
    if(ifrm) { 
     ifrm.src="show_events.html"; 
    } 

    //post to events field 
    var elem = top.frames['display'].document.getElementById('event'); 
    if(elem) { 
     elem.innerHTML = data; 
    } 
} 

</script> 

<title></title> 

</head> 
<body> 
<fieldset> 
<legend>Select</legend> 
<input type="button" value="Configure" onclick="doconfigure();"> 
<input type="button" value="Events" onclick="doevents();"> 
<input type="button" value="Outbound" onclick="dooutbound();"> 
<input type="button" value="simulate event" onclick="HandleEvents('my event');"> 
<br /> 
</fieldset> 
<iframe src="configure.html" name="display" id="ifrm" height="700" width="800"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 


</body> 
</html>

然後show_events.html頁：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title></title> 
</head> 
<body> 
    <p>Events:</p> 
    <p id="event"></p> 
</body> 
</html>

來源

2013-04-01 Angus Comber

你必須等待，直到幀[滿載]（http://stackoverflow.com/questions/1463581/waiting-for-an-iframe-to-在傳遞信息之前加載），然後才能訪問元素。 – epascarello

您需要等待iframe完全加載才能訪問iframe中的元素。

基本思想：

function HandleEvents (data) { 

    var myIframe = document.getElementById('ifrm'); 
    myIframe.onload = function() { 
     var innerDoc = myIframe.contentDocument || myIframe.contentWindow.document; 
     var myElement = innerDoc.getElementById('event'); 
     myElement.innerHTML = data; 
    }; 
    myIframe.src = 'show_events.html'; 

}

來源

2013-04-01 16:14:39 epascarello

您將無法做到這一點，除非IFRAME共享相同的起源父腳本（CSRF保護的目的）。如果滿足這個要求，那就很好。

強烈建議您使用jQuery，因爲事情會非常迅速地變得非常混亂。

的jQuery（小提琴：http://jsfiddle.net/ZYxVA/）

var myIFRAME = $("iframe#test"); 
var myContent = $("html",myIFRAME.contents());

原生（小提琴：http://jsfiddle.net/L8Cek/）

var myIFRAME = document.getElementById("test"); 
var mC = myIFRAME.contentDocument, 
    mCbody = mC.getElementsByTagName("body")[0]; 
var docE = document.createElement("div"); 
docE.innerHTML = "this is a test"; 
mCbody.appendChild(docE);

您可以使用下面的訪問到IFRAME的DOM

正如你現在可以告訴的那樣，jQuery是str由於你的代碼會很快得到非常多多毛，非常否則推薦。快速運行是$（「iframe」）。contents（）允許你獲得contentDocument。從那裏，您可以通過將它作爲第二個參數傳遞來針對該DOM運行查詢。

除此之外，在iframe完全加載之前，您也無法執行任何操作。你可以通過綁定一個onLoad事件來監聽它。

來源

2013-04-01 16:14:33

點採取重新JQuery，但是我想首先學習baisc javascript。 –

這很好，這就是爲什麼我提供了兩個:-) –

如何訪問iframe元素

回答

相關問題