用另一个 iframe 镜像 iframe 页面（制作双 iframe）答案

【问题标题】：Mirror iframe page with another iframe (making twin iframes)用另一个 iframe 镜像 iframe 页面（制作双 iframe）
【发布时间】：2019-10-10 22:34:00
【问题描述】：

我正在做一些项目，我需要一个网页。它只有这种设施。通过使用 html，我知道我们可以使用 iframe 在单个选项卡中使用多个选项卡，但每个 iframe 的工作方式不同。我需要的是，假设我在一个 chrome 选项卡中有两个 iframe，所以如果我在第一个 iframe 中打开一个网站，它也应该在另一个 i 框架中打开。所以在这里更清楚的是一个简单的例子：假设我在这些框架中有 5 个带有 YouTube 的 iframe，所以我在一个框架中单击评论，但应该在每个 iframe 中单击它。当我在一个 iframes YouTube 评论框中输入“hi”时，它应该在 5 个 iframes YouTube 评论框中输入。当我点击帖子时，它应该同时在 5 个 iframe 中的每一个中同时发布。所以我想使用 iframe 制作双页。希望你们能理解我的问题..

【问题讨论】：

我们不是来做你的功课的。发布您的实施。

标签： html css google-chrome iframe

【解决方案1】：

我可以给你一些一般性的指导：

您不能直接从客户端上的 JS 访问元素，需要：对 Vanilla Js 使用 .contentWindow.document 或对 Jquery 使用 Contents()

Jquery W3school 例如 https://www.w3schools.com/jquery/traversing_contents.asp

这里我有 2 个 iframe：代码是重复的，但它会显示示例

您需要做的是清理它，使其不再重复，然后转移值或进行更稳健的转移 - 例如循环遍历元素，传递参数

 <iframe id="myFrame" src="/your-iframe" style="your style"></iframe>


    <iframe id="myFrame2" src="/your-iframe" style="your style"></iframe>

    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {

/iframe 1
      var iframe = document.getElementById("myFrame");
           var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
      elmnt1.style.display = "none";

/iframe 2
        var iframe = document.getElementById("myFrame2");
      var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
      elmnt1.style.display = "none";

    }
    </script>

这只是说明这个想法：现在你围绕这个想法构建客户端

【讨论】：