Question

我有一个iframe中包含的导航菜单，它本身是从外部文件中提取的：

<iframe src="iframe.htm"></iframe>

iframe.htm的内容：

<!DOCTYPE HTML>
<html>
  <head>
    <title>iframe</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a id="index" href="index.htm" target="_blank">Home</a></li>
        <li><a id="page01" href="page01.htm" target="_blank"> 1</a></li>
        <li><a id="page02" href="page02.htm" target="_blank"> 2</a></li>
        <li><a id="page03" href="page03.htm" target="_blank"> 3</a></li>
      </ul>
    </nav>
  </body>
</html>

目标是通过更改用户当前访问的页面的锚点的背景颜色和文本颜色来提供用户反馈。因此iframe.htm id="index" <body onload="document.getElementById('index').style.backgroundColor = 'sandybrown'; document.getElementById('index').style.color = 'black'">我可以这样做：

{{1}}

我的问题：是否可以通过JavaScript以类似的方式访问iframe中的元素（来自外部）本身包含在外部HTML中？

Answer 1

是的，您可以（除非两个页面都在同一个域中）。您可以使用 contentDocument 属性，例如：

<iframe id="myFrame" src="iframe.htm"></iframe>
<script>
    var f = document.getElementById("myFrame");
    f.contentDocument.getElementById('index').style.backgroundColor = 'sandybrown';
</script>

Answer 2

不，它无法通过JS或CSS向iframe代码添加任何样式。

我可以更改包含在外部HTML中的iframe中包含的元素的样式吗？

2 个答案: