javascript - 获取 iframe 的内部元素

Question

我有一个简单的 html 页面。它有一个指向其他网站的 iframe。我想更改嵌套在该 iframe 中的锚标记的颜色。可以通过 javascript 访问 Iframe 的元素

Answer 1

如果另一个页面在另一个域中，由于跨域安全性，将无法从主页面编辑 iframe 的 HTML 内容。

对此有解决方法，例如在 url 中写入您想要进行的更改。但这真的很脏。

如果它在同一个域中，我建议使用，例如：

$('div', $('iframe')[0].contentWindow.document)

用于获取 iframe 中的所有 div 元素

Answer 2

我通过使用以下代码做到了

函数 loadFrame(){ document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue'; }

Answer 3

你需要 JavaScript。这与在父页面中执行此操作相同，只是您必须在 JavaScript 命令前加上 iframe 的名称。

请记住，相同的来源策略适用，因此您只能对来自您自己的服务器的 iframe 执行此操作。

frame1.$('mydiv').style.border='1px solid #000000'

或者

frame1.$('mydiv').addClassName('withborder')

Answer 4

您可以使用 iframe 获取元素的值

 $('#iframeId').contents().find('#id-of-element-inside-iframe');

但是值不能改变。

Answer 5

只有一个简单的解决方案，它仅在您拥有 iframe 中的内容时才有效。

在您的父源中添加：

<script type="text/javascript">
    var innerDocument = null;
</script>

在您的 iframe 中添加：

<script type="text/javascript">
    parent.innerDocument = document;
</script>

加载 iframe 后，您现在可以使用 innerDocument 定位 iframe 的文档。这绕过了跨域安全。