javascript - 如何在不加载相同 URL 的情况下镜像 iframe? CSS 未激活

标签 javascript jquery html css iframe

我有两个并排的 iframe,只希望第一个加载 URL。第一个完成加载后,我希望第二个 iframe 具有相同的内容,而不加载相同的 URL。这是我尝试过的:

在这里测试:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script>
    $(document).ready(function() {
      $('#iframeID1').on('load', function() {
        $('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
      });
    });
  </script>
</head>

<body>
  <iframe id="iframeID1" src="https://www.w3schools.com/" frameborder="0" scrolling="no" width="180px" height="512" align="left">
    </iframe>

  <iframe id="iframeID2" frameborder="0" scrolling="no" width="180px" height="512" align="middle">
    </iframe>
</body>

</html>

但是,这是第二个 iframe(右侧)显示的内容(加载 CSS 失败?):

最佳答案

非 jquery 但你为什么不从页面读取 HTML,然后使用诸如...之类的东西动态创建第二个 iframe

Iframe.contentWindow.document.open('text/htmlreplace');
Iframe.contentWindow.document.write(htmlfromfirstiframe);
Iframe.contentWindow.document.close();

关于javascript - 如何在不加载相同 URL 的情况下镜像 iframe? CSS 未激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43835923/

相关文章:

javascript - CefSharp:JavaScript fetch() 调用不会进行飞行前 OPTIONS 调用

javascript - 使用 AJAX 附加到 DOM,数据显示为字符串而不是 HTML

javascript - 将日期粘在顶部,直到滚动期间出现新日期,就像 WhatsApp 中一样

html - IE 中的圆 Angular 使用边框半径

javascript - 使用javascript验证下拉列表

python - 如何将特定信息从 html 提取到 python webscraper?

javascript - 在 $state.go 上禁用转换

javascript - 模型不会在 ng-if 中更新

javascript - 如何在 Selenium 中获取 javascript 工具提示消息?

jquery - 为什么 [checked] 不能作为 JQUERY 中的选择器?