0

我有以下 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>
4

2 回答 2

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 事件来收听。

于 2013-04-01T16:14:33.710 回答
0

您需要等待 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-01T16:14:39.570 回答