Question

我有def connect_to_db_with_mysql_driver begin puts "Trying to connect to Mysql" db = Sequel.connect( // Connection stuff ) if db.test_connection == true Sequel::Model.db = db else raise "Mysql connection failed." end rescue => ex puts ex puts "Retrying..." retry end end wrapperPage.html和<iframe class="header"。在<iframe class="pageBody"中有一个链接header，点击后会清除<a class="clearLink"的内容。

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

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

wrapperPage.html

pageBody

header.html：

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

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

Answer 1

尝试使用Demo

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>

Answer 2

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

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

例如：

在pageBody.html中编写与自定义事件关联的函数。
从header.html iFrame中的点击功能获取窗口参考。
搜索已分配自定义事件的目标元素。
解雇活动

我希望它对你有所帮助。

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

2 个答案: