Javascript 从iframe到iframe获取值_Javascript

Javascript 从iframe到iframe获取值

javascript

Javascript 从iframe到iframe获取值,javascript,Javascript,文档movie.htm中有两个iFrame： <iframe id='movies' class='top' frameborder='0'></iframe> 及在moviesearch.htm中有一个输入标记 <input id="search_str" type="text"> 我想知道如何使用文档movie.htm中的JavaScript访问此值（包含在moviesearch.htm）当用户连续键入字段时，需要在movie.htm中

文档movie.htm中有两个iFrame：

<iframe id='movies' class='top' frameborder='0'></iframe>

及

在moviesearch.htm中有一个输入标记

<input id="search_str" type="text">

我想知道如何使用文档movie.htm中的JavaScript访问此值（包含在moviesearch.htm）

当用户连续键入字段时，需要在movie.htm中实时更新该值

如何在JavaScript中实现这一点？

postMessage。

movie.htm：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>

</body>
<script>
window.addEventListener
    ("message", function(e) {
    document.getElementById("updatedvalue").innerHTML = e.data;
    }, true);


</script>
</html>


当前值：
window.addEventListener
（“信息”，功能（e）{
document.getElementById（“updatedvalue”）.innerHTML=e.data；
}，对）；

moviesearch.htm：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
    window.parent.postMessage(message, "*");
}
</script>
</html>


函数sendMessage（消息）{
window.parent.postMessage（消息“*”）；
}

如果两个页面位于同一个域中，您将能够

iframe.contentDocument

它也适用于所有浏览器。contentDocument可能是更安全的赌注。我只是喜欢用HTML5的方式：这不是一个好主意吗？任何人都可以（隐藏）加载movie.htm并发布带有XSS攻击的消息？！永远不要使用innerHTML，特别是如果你试图使用HTML5:）是的，举个例子，我没有扫描本地域（因此是“*”）。但出于安全考虑，您需要这样做。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
    window.parent.postMessage(message, "*");
}
</script>
</html>