当前位置: 首页 > 面试题库 >

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

柴琨
2023-03-14
问题内容

我有一个wrapperPage.html<iframeclass="header"<iframeclass="pageBody"。在header其中有一个链接,<aclass="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>

问题答案:

尝试使用频道信息

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>


 类似资料:
  • 在我的主FXML控制器类Alpha中,我有一个掩码,它包含一个文本字段和一个按钮clear It: 如果我在“文本”字段中输入文本并点击“清除”按钮,文本将被删除。到目前为止,一切正常。 我有第二个控制器类测试版。相应的fxml文件包含菜单布局(菜单栏)。如果点击了菜单项“New”,它也应该清除alpha类中的my文本字段。 但什么也没发生。我在这里做错了什么?如何单击FXML控制器类中的按钮/菜

  • 问题内容: 包含(和)中也存在的两个元素。 有没有一种干净的方法来确保其中不包含这些元素或其中可能已经存在的任何其他重叠元素? 问题答案: 这将使您只包含。

  • 问题内容: 我有一个jQuery片段,如下所示: 第一次触发该事件时,仅显示一个空的iframe,但是如果第二次触发该事件,则内容将成功添加到iframe中。此代码段中是否有任何明显的错误? 问题答案: 我相信某些浏览器需要短暂的延迟才能识别新iframe的DOM。使用超时应该可以:

  • 问题内容: 我想在HTML页面中包含HTML页面。可能吗? 我不想在PHP中做到这一点,我知道在PHP中我们可以在这种情况下使用,如何在不使用and 概念的情况下仅在HTML中实现相同的效果? 问题答案: 如果您只是试图将自己的HTML插入另一个文件中,并且认为 服务器端包含是“纯HTML”(因为它看起来像HTML注释,并且未使用PHP之类的“脏”东西) ):

  • 我正在尝试创建一个测试,在这个测试中,我必须在iframe中填写一些信息。访问iframe工作正常,我可以在框架内填写信息。问题是,当我找到一个元素“a”时,它会附加一个回发,它会在iframe中重新加载内容,以找到另一个元素“B”。所以我找不到那个元素。我遇到以下错误: 以下是我的观察:当我第一次找到iframe时,它看起来像这样: 发生回发后,如下所示: 我可以很容易地找到元素A: 但是元素B

  • 问题内容: 如何从网络应用程序中嵌入的iframe中删除边框?iframe的一个示例是: 假设背景颜色一致,我希望从页面上的内容到iframe的内容的过渡是无缝的。目标浏览器仅是IE6,遗憾的是,其他浏览器的解决方案将无济于事。 问题答案: 添加属性(注意 大写字母’B’ )。 因此,它看起来像: