>

그래서 HTML로 나란히 "프레임"을 만들라는 요청을 받고 있습니다. 왼쪽의 iframe에서 컨텐츠를 선택하면 동일한 페이지에서 옆에있는 iframe의 링크가 채워집니다.

추가 배경 : 왼쪽은 Tableau에서 생성 된 메뉴 표시 줄이며 오른쪽은 시각화가 첨부 된 것입니다. 아래 코드와 같이 대상을 사용하면 작동하지 않습니다.

<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>

어떤 조언이라도 대단히 감사합니다.

  • 답변 # 1

    두 페이지를 모두 제어한다고 가정하면 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>
    
    

  • 이전 reactjs - material-ui v1 - 테마 구성에 사용자 정의 색상 사용
  • 다음 types - 나눌 수없는 숫자를 처리하는 방법