同一页的iframe

Question

因此，有人要求我在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>

任何建议深表感谢。

Answer 1

假设您控制了两个页面，则可以使用postMessage在iframe之间发送消息，左侧窗口向父级发送消息，父级向右子级发送消息，如下所示：

outside.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>

编辑-纯导航答案

outside.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>

同一页的iframe

问题描述

1 个解决方案

解决方案1
0 2017-09-06 17:18:00

编辑-纯导航答案

同一页的iframe

问题描述

1 个解决方案

解决方案1 0 2017-09-06 17:18:00

编辑-纯导航答案

解决方案1
0 2017-09-06 17:18:00