从iframe内调用JavaScript函数修改父页面元素的问题与解决

我在main.html里嵌入了展示inside.html的iframe，想实现点击iframe内的元素时修改父页面的文本，一开始写的代码没生效，调整后解决了问题，下面是具体情况：

原未生效代码 #

script.js #

function changeText(){
  document.getElementById("text").innerHTML = "clicked";
}

inside.html #

<a href="clicked.html" onclick="changeText()"><p>this</p></a>
<script src="script.js"></script>

main.html #

<p id="text">click the link</p>
<iframe src="main.html" name="mainframe"></iframe>
<script src="script.js"></script>

问题现象 #

点击iframe里的链接后，iframe成功跳转到clicked.html，但父页面的文本完全没变化。

解决办法 #

把inside.html里的onclick调用改成parent.changeText()就行，修正后的代码如下：

修正后的inside.html #

<a href="clicked.html" onclick="parent.changeText()"><p>this</p></a>
<script src="script.js"></script>

原因解释 #

• iframe是独立的浏览器上下文，默认情况下，iframe里的JS只能访问自己页面的DOM和全局变量，碰不到父页面的内容。
• parent是iframe里指向父页面window对象的引用，用parent.changeText()就能调用父页面里定义的函数，进而修改父页面的元素。

另外提一句：原main.html里iframe的src写的是main.html，这会导致页面嵌套加载自己，容易出问题，建议改成src="inside.html"才符合需求。

内容的提问来源于stack exchange，提问作者dustynoir