如何从另一个 iFrame 中清除 iFrame 的内容答案

【问题标题】：How to clear the contents of an iFrame from another iFrame如何从另一个 iFrame 中清除 iFrame 的内容
【发布时间】：2016-02-12 06:10:01
【问题描述】：

我有一个wrapperPage.html 和一个<iframe class="header" 和<iframe class="pageBody"。在header 中有一个链接<a class="clearLink"，单击该链接应清除pageBody 的内容。

到目前为止，上述想法的以下实现不起作用。请帮我解决这个问题。

请注意，header 和 pageBody 分别从不同的包含文件加载。

wrapperPage.html

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

【问题讨论】：

试过使用网络工作者？
两个 iFrame 是否在同一个域中？
它们是所有HTML文件都存储在我本地硬盘的同一个文件夹中
此回复可能会有所帮助：stackoverflow.com/a/19187765/259889

标签： javascript jquery html iframe

【解决方案1】：

尝试使用Channel messaging

wrapperPage.html

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

【讨论】：

嗨@guest271314。请最后一件事。在获得 iFrame var pageBody = $(".pageBody")[0].contentWindow; 后，如何从 iFrame 中选择一个元素并向其中添加一些 HTML。例如，像这样的实现：$(pageBody.document.body).contents().find(".someDIV").html('<div>DIV content</div>');
@Program-Me-Rev 试过$(pageBody.document.body).contents().find(".someDIV").html('<div>DIV content</div>'); ?
是的。我在加载 HTML pageBody.html，然后尝试将 HTML 添加到 DIV contentDIV 内 pageBody.html 后完成了它。这就是我的做法： $(pageBody.document.body).load('pageBody.html'); $(pageBody.document.body).contents().find(".contentDIV").html('
Content...
');
嗨@guest271314。我只是注意到它实际上加载了 HTML，然后很快就消失了。可能是什么问题？
似乎正在加载整个 html 文档 - 与现有 html 文档相同的 html 文档 - 到 pageBody 的 body 元素 $(pageBody.document.body).load('pageBody.html'); ？，然后用'<div>Content...</‌div>' 替换新添加的文档？尝试不使用.load() 部分？预期的结果是什么？

【解决方案2】：

您可以从 iFrame 中获取主窗口的引用，如下所示： Window.Parent reference

然后，您可以分配一个事件来捕获主窗口中的触发器或函数（或仅在另一个 iFrame 中）来管理它。

例如：

在 pageBody.html 中编写与自定义事件关联的函数。
从header.html iFrame 中的点击函数获取窗口引用。
搜索已分配自定义事件的目标元素。
触发事件

希望对你有所帮助。

【讨论】：