javascript - 使用 postMessage() 将一大块 HTML 发送到另一个 URL-6ren

javascript - 使用 postMessage() 将一大块 HTML 发送到另一个 URL

转载作者：行者123 更新时间：2023-11-28 02:53:16

目标:复制一段 HTML 并将其发送到另一个域中的网站。

我的问题:我正在处理的网站和 iframe 中的网站位于不同的域中。我拥有它们两个，并设置了 Access-Control-Allow-Origin 以允许网站相互通信。但是，我似乎无法将 HTML block 传递给父窗口。
我试过 parent.window.postMessage(chunk, http://www.parent-page.com) (chunk 是 HTML 代码块)但是我得到这个错误:
未捕获的 DataCloneError:无法在“Window”上执行“postMessage”:无法克隆对象。
我也尝试过使用 ajax 向父窗口发送 PUT 请求，但是我收到 404 错误，它找不到父窗口。 *我正在从本地服务器运行父窗口。

我的问题:如果这两个网站不在同一个域中，谁能告诉我将包含 HTML 代码的对象从 iframe 发送到父窗口的最佳方法？

编辑:我删除了关于骨架对象的内容，因为那超出了我真正想问的问题的范围。

最佳答案

这是我为解决这个问题而写的。欢迎任何建设性的批评。

父窗口网站代码:

//send a message to the website in the iframe
  $("#frame").on("load", function (event) {
    var viewContainer = $('#element-highlight');
    var iframe = document.querySelector('iframe');
    var receiver = iframe.contentWindow;
    var location = 'http://www.child-website.com';
    event.preventDefault();
    receiver.postMessage("sendStructure",location);		 
  });

//listen for a response
  window.addEventListener('message', function(event) { //event = onmessage event object
    if (~event.origin.indexOf('http://ccook.oegllc.com')) { //indexOf returns a -1 if the searchValue is not found 	  
  		  var structure = event.data;
		  var container = document.getElementById("element-highlight");
		  container.innerHTML = structure;
    }
  }

<script src="../jquery/3.0.0/jquery.min.js"></script>
<body>
  <div id="frame-container">
        <iframe id="frame" src="http://www.main-site.com" frameborder="0"></iframe>
        <div id="element-highlight">
          <!-- Store Skeleton Copies here -->
        </div>
</div>
  
</body>

iframe 中显示的网站代码:

我无法让下面的 case 语句看起来更好。

        //listen for command from main-site.com
        window.addEventListener('message', function(event) { //event = onmessage event object
            if (~event.origin.indexOf('http://www.main-site.com')) { //indexOf returns a -1 if the searchValue is not found
                switch(event.data){
                    case "sendStructure":
	                  var structure = getStructure(),
                      tempNode = document.createElement("div");
                      structure.appendTo(tempNode); //appends structure to html document
					  var str = tempNode.innerHTML; //creates a serilized version of the structure
					  parent.window.postMessage(str, event.origin); //send structure string to main-site.com
					break;
    //I reccomend using a case statement if the two sites will be sending more than one message to each other
                    default:
                        sendError();
                }
            }

        });


        function getStructure(){
            //this method creates a skeleton of the course page you are on
            //returns a skeleton object
            console.log("compiling structure");
            var viewFrame = $('body').contents(); //<-change 'body' to whatever element you want to copy
            var visible = viewFrame.find('*:not(html body)').filter(':visible');
            var overlayElements = visible.map(function (i, el) {
                    var el = $(el);
                    var overlayEl = $('<div>');

                    overlayEl.addClass('highlight').css($.extend({
                        position: 'absolute',
                        width: el.outerWidth(),
                        height: el.outerHeight(),
                        'z-index': el.css('z-index')
                    }, el.offset()));

                return overlayEl.get();
                });
          
        return overlayElements;
        }

        function sendError(){
            console.log("main-website's request could not be understood");
        }