Question

我有以下html和javascript。如果我点击模拟事件，我希望HandleEvents函数将文本发布到'子'页面html中。所以我基本上试图从父母那里锁定一个子网页内的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">
<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>

Answer 1

除非IFRAME与父脚本共享相同的来源（用于CSRF保护），否则您将无法执行此操作。如果满足这个要求，那一切都很好。

强烈建议使用jQuery，因为事情会很快变得非常混乱。

您可以使用以下方法访问IFRAME的DOM：

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);

正如您现在可能已经知道的那样，强烈建议使用jQuery，因为您的代码将很快非常，非常。快速下降是$（“iframe”）。contents（）允许您获得contentDocument。从那里，您可以通过将其作为第二个参数传递来对该DOM运行查询。

除此之外，在iframe完全加载之前，您也无法执行任何操作。您可以通过在其上绑定onLoad事件来监听此事。

Answer 2

您需要等待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';

}

如何访问iframe元素

2 个答案: