如何同时滚动父窗口和滚动iframe。我的意思是说,如果有人滚动iframe,它也应该滚动父窗口。我正在考虑通过javascript实现此目的。起源是相同的。
最佳答案
由于两个文档共享相同的原点,因此您不受相同的原点策略的限制,这意味着您可以从一个文档中的javascript调用另一文档中的javascript。
一个简单的例子:
父级index.html
<html>
<head>
<script>
function handleMessage(msg) {
console.log("message from iframe: ", msg);
}
function sendMessage() {
let msg = {
value: document.getElementById("message").value
}
document.getElementById("iframe").contentWindow.handleMessage(msg);
}
</script>
</head>
<body>
<input type="text" id="message" />
<button onclick="sendMessage()">send message to parent</button>
<br/><br/>
<iframe id="iframe" src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<script>
function handleMessage(msg) {
console.log("message from parent: ", msg);
}
function sendMessage() {
let msg = {
value: document.getElementById("message").value
}
parent.handleMessage(msg);
}
</script>
</head>
<body>
<input type="text" id="message" />
<button onclick="sendMessage()">send message to parent</button>
</body>
</html>
既然您知道如何从一个文档调用js方法到另一个文档,那么它应该足够简单,以捕获一个文档中的滚动事件,然后让另一个文档知道滚动增量。