所以我被要求在 html 中创建一个并排的“框架”。选择左侧 iframe 中的内容时，它会在同一页面上填充它旁边的 iframe 中的链接。
其他背景:左侧是从 Tableau 生成的菜单栏，右侧是附加的可视化。在下面的代码中使用 target 没有奏效:
<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>
非常感谢任何建议。
最佳答案
假设您控制两个页面，您可以使用 postMessage 在 iframe 之间发送消息，左窗口向父窗口发送消息，父窗口向右子窗口发送消息，示例如下:
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe src="right.html" class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source) {
r.contentWindow.postMessage(e.data, '*')
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="clickEvent()">SEND</button>
</body>
<script>
function clickEvent() {
window.top.postMessage({"payload": "Hello from the other side"}, '*')
}
</script>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<script>
window.onmessage = function(e){
if (e.source == window.top) {
if (e.data["payload"]) {
alert(e.data["payload"]);
}
}
}
</script>
</html>
编辑 - 纯导航答案
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source && e.data["payload"]) {
r.src = e.data["payload"]
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="navigate('http://www.bing.com')">BING</button>
<button onclick="navigate('http://www.example.com')">EXAMPLE</button>
</body>
<script>
function navigate(url) {
window.top.postMessage({"payload": url}, '*')
}
</script>
</html>
关于javascript - 同一页面 Iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46080464/