带有 iFrame 的网页答案

【问题标题】：Webpage with iFrames带有 iFrame 的网页
【发布时间】：2020-06-18 19:07:09
【问题描述】：

我正在尝试制作一个网站，其中我有两个 iframe 与其他网页并排，并且只想显示这些网站的某个部分。

尝试编辑这些网站的 innerHTML 会引发有关跨页面安全问题的错误。如何以安全的方式在这些 iFrame 中运行 Javascript？如果这是不可能的，是否有一个很好的 iFrame 替代方案，我可以并排访问网站？

能够编辑两个 iFrame 对我来说并不重要，只需要其中一个是可编辑的。

【问题讨论】：

标签： javascript html web iframe cross-site

【解决方案1】：

iframe 只是页面中的一个“洞”，它会在其中显示另一个网页。 iframe 的内容不是任何形状，也不是父页面的一部分。

如果您的 iframe 是从与您的父级相同的域加载的，那么您可以从父级访问 iframe 中文档的 DOM。

考虑到 iframe 来自同一个域，尝试使用下面的代码，看看它是否有效。下面的代码将向 iframe 添加 CSS 更改。如果这对您有用，那么您也可以运行 javascript。

<script>
 var iframe = document.getElementById("frame1");
$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .lt{display:none;}  </style>"));
});
</script>

如果您收到“权限被拒绝类型错误”，我认为您正在做的事情受same-origin policy 的约束。这应该是您收到权限被拒绝类型错误的原因。

您可以在这里查看可能的解决方案。

Unable to access iframe content (same-origin policy)

【讨论】：