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

IT技术 javascript jquery html iframe
2021-01-28 20:39:37

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

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

请注意，header和pageBody每个都从不同的包含文件加载。

包装页面.html

<div class=non-floater>
    <iframe class="header" src="header.html"></iframe>
    <iframe class="pageBody" src="pageBody.html" /> 
</div>

标头.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>
2个回答

尝试使用频道消息

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>
似乎正在将整个文档（与现有文档html相同的html文档）加载html到atbody元素中？，然后用? 试过没有份？什么是预期结果？pageBody$(pageBody.document.body).load('pageBody.html');'<div>Content...</‌​div>'.load()
2021-03-24 20:39:37
嗨@guest271314。请做最后一件事。在获得 iFrame 后，如何从 iFrame 中选择一个元素并向其中添加一些 HTML var pageBody = $(".pageBody")[0].contentWindow;。例如，像这样的实现：$(pageBody.document.body).contents().find(".someDIV").html('<div>DIV content</div>');
2021-03-25 20:39:37
是的。我在加载 HTML 之后完成了它pageBody.html，然后尝试将 HTML 添加到 DIV 中，contentDIV在pageBody.html. 这是我的方法： $(pageBody.document.body).load('pageBody.html'); $(pageBody.document.body).contents().find(".contentDIV").html('<div>Content...</div>');
2021-04-09 20:39:37
@Program-Me-Rev 尝试过$(pageBody.document.body).contents().find(".someDIV").html('<div>DIV content</div>');吗？
2021-04-11 20:39:37
嗨@guest271314。我只是注意到它实际上加载了 HTML，然后它很快消失了。可能是什么问题呢？
2021-04-11 20:39:37

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

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

例如 ：

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

我希望它能帮助你。

其它你可能感兴趣的问题
上一篇Angular2/Spring Boot 允许在 PUT 上交叉原点 下一篇使用无显示按钮防止在 Jquery 表单上加载页面