我有一个wrapperPage.html与<iframeclass="header"和<iframeclass="pageBody"。在header其中有一个链接,<aclass="clearLink"单击该链接应清除的内容pageBody。
wrapperPage.html
<iframeclass="header"
<iframeclass="pageBody"
header
<aclass="clearLink"
pageBody
到目前为止,上述想法的以下实现无效。请帮我解决这个问题。
请注意 ,header并且pageBody每个都从不同的包含文件加载。
<div class=non-floater> <iframe class="header" src="header.html"></iframe> <iframe class="pageBody" src="pageBody.html" /> </div>
header.html:
<script type="text/javascript"> $(document).ready(function() { $(".clearLink").on("click", function() { $('.pageBody').contents().find("body").html(''); }); }); </script> <a class="clearLink" href="#">Navigation Button</a>
pageBody.html:
<div class="panel-body">This is the body</div>
尝试使用频道信息
<body> <div class=non-floater> <iframe class="header" src="header.html"></iframe> <iframe class="pageBody" src="pageBody.html" /> </div> <script> var channel = new MessageChannel(); var header = $(".header")[0].contentWindow; var pageBody = $(".pageBody")[0].contentWindow; header.onload = function() { this.postMessage("","*", [channel.port2]) }; channel.port1.onmessage = function(e) { if (e.data === "clicked") { $(pageBody.document.body).html("") } } </script> </body>
header.html
<body> <a class="clearLink" href="#">Navigation Button</a> <script> var port; onmessage = function(e) { port = e.ports[0]; } $(".clearLink").on("click", function(e) { port.postMessage("clicked"); }); </script> </body>