无法更改范围 class 的 InnerHTML？

Question

我是 JavaScript 的新手，我不明白为什么我的 html 没有改变？

我有一个 Iframe，我正在尝试更改 Iframe 在 DOM 中创建的跨度 class 的 .innerHTML。

在DOM结构中，class被称为<span class="weather-location">China</span>

我只是想通过将它的 innerHTML 改为台湾来访问它。

这是我的代码：

<html>
<head>
<title>test</title>
</head>
<body onload="myFunction()">

<iframe class="weather" width="100%" height="600px" frameBorder="0" 
src="(this is my iframe src code)></iframe>

<script type="text/javascript">
   function myFunction() {
      document.getElementsByClassName("weather-location")[0].innerHTML = "Taiwan";
   }
</script>
</body>
</html>

当我在控制台日志中对其进行测试时，它显示 weather-location 为 [] 但同样奇怪的是，当我使用选择器工具将鼠标悬停在 weather-location class 然后返回并在控制台中重新输入代码，它会改变 class 我想要的方式吗？

此外，我不知道这是否有帮助，但是当它在 chrome 中显示为 [] 时，会弹出一个小 i 框，上面写着 "value below was evaluated just now".

Answer 1

如果 iframe 在 另一个域上，则您无法更改它的 innerHTML。

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

这种 iframe 就像 window 进入您无法控制的另一个网页。

如果它在 相同域 上，您可以使用

var ifr = document.getElementById( yourIframeId );
var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;
var theForm = ifrDoc.getElementById( yourFormId );

所以问题：accessing a form that is in an iframe

感谢：@le_m

无法更改范围 class 的 InnerHTML？

Cannot Change InnerHTML of span class?

javascript

console.log