html - 从一个 iframe 的 div 中提取/回显文本到页面的另一部分

Question

因此，如果可能的话，我想回显(或以其他方式复制)自定义页面上一个 iframe 内的一些文本，我正在将其制作到此 iframe 所在页面上的另一个部分/div 中。

例子:

<div 1>
  <iframe> 
    <div inside frame>
       Text i would like to echo/copy
    </div>
  </iframe>
</div>
<div 2>
  (another iframe could go here if needed but i was firstly trying to do it without another one.)
  Text from the iframe above 
</div>

我可能没有 100% 正确，但我想这样做，在第二个 div 中我将有一个使文本滚动的类。

这是我正在从事的抽搐流元素的用途。这是从页面获取显示“正在播放”的文本，并通过背景颜色“色度键绿色”使其透明并将其显示在流中。

另一种选择是，如果我可以使用某种脚本在它更新时将文本从该 div 发送到文本文件中，然后我可以将文本文件添加到流中。

注意:我不介意使用 php 或 java/jquery。我试图让文件易于使用和编辑。我只是想指出我在 java 和 php 方面经验不足。我想以最简单的方式做到这一点。谢谢!

(我不想包含我所有的代码，但它相当简单，感谢所有帮助。)

Answer 1

如果父页面和 iframe 内的页面托管在同一域中，您可以在父页面上直接访问 iframe 的内容:

var iframe = document.getElementById('id-of-iframe');
var element = iframe.documentWindow.getElementById('id-of-element-inside-iframe');

出于安全原因，如果页面未托管在同一域中，这将失败。

如果页面托管在不同的域上，但您可以访问这两个域(阅读:您可以在两个页面上更改服务器的 HTML 输出)，您还有另一个选项，称为跨文档消息传递。

这个有点复杂，涉及到父子页面上的脚本来相互通信和来回发送数据。

在父页面上，你会有这样的东西:

window.attachEventListener('onmessage', function (...) {
  // Listen for messages from the child page
}, false);

然后在子页面中，您将打包数据并通过如下调用将其发送给父页面:

parent.postMessage(...);

显然，我在这里遗漏了一些细节 (...)，但这是总体思路。

如果您不能同时访问父页面和子页面，则无法实现您的要求。允许任何页面访问 iframe 内的任何其他页面将是一个主要的安全问题。 (想象一下，如果我在我的网站上放置了一个整页的 iframe，在其中加载了 Gmail，然后设置一个脚本来监视密码字段的值。)