如何将数据传递给iframe中的变量

Question

我正在研究连接本地服务器和全局服务器（服务器无法通信）服务器通过套接字 io 与 html 文件通信的项目 我对这个概念很陌生

我的情况是

1. 浏览器连接到本地应用
2. 本地服务器发送包含 iframe 的 html 页面，iframe 的来源是全局服务器
3. 全球服务器发送html页面 我的浏览器在全局服务器中显示 html 页面，我的本地服务器也在运行

如何将数据从本地服务器传递到全局服务器？ 基本上本地服务器将数据发送到容器 html 文件，并将数据传递到 iframe 中的 html 文件，以便它可以将数据传递到全局服务器 也许从容器 html 调用一个方法到 iframe html 并发送数据？有可能吗？

希望我的观点清楚 请帮忙

Answer 1

发布消息可以正常工作，但您可以像实例一样在框架内调用方法而不是发布消息

 $('#myIFrame').on('load',()=>{
        let q = document.getElementById("myIFrame").contentWindow
        q.method() // a method inside iFrames js
    })

你可以从 iFrame 内部调用方法到 main 中

window.top.method();

但它会在 Uncaught DOMException: Blocked a frame with origin () 访问跨域框架时被捕获。如果您禁用网络安全，它将正常工作

Answer 2

最好的方法是使用事件总线 javascript

//main doc
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
   console.log("main",event);
   // ...
}
window.document.getElementById("iframe").contentWindow.postMessage('test', *);

//iframe
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
   console.log("iframe",event);
   // ...
}

window.parent.postMessage('test', *);

注意 CORS 有问题

https://developer.mozilla.org/docs/Web/API/Window/postMessage

More complet exemple

Answer 3

据我所知，您需要在 iframe 中传递某种变量，以便您可以以查询字符串的形式附加 iframe 的“src”属性。

您可以在重新加载 iframe 时获取此查询字符串值。

例如

<div class="my-frame-container" myurl="http://myserver.com" elementid="mycontainerframe"><iframe id="myiFrame" src="" allowtransparency="true" width="100%" height="100%" frameborder="0"></iframe></div>   

 someEvent(e.g.: click)
    window.parent.postMessage(
                {
                    event_id: 'reloadMyFrame',                        
                },
                "*"
            );

在 iframe js 文件中你可以添加一个事件监听器

     var eventMethod = window.addEventListener ? "addEventListener" : 
     "attachEvent";
     var eventer = window[eventMethod];
     var messageEvent = eventMethod == "attachEvent" ? "onmessage" : 
     "message";

  eventer(messageEvent, function (e) {
            var eventId = e.data["event_id"];
    if(eventId==="reloadMyFrame")
    {
    var container = $('.my-frame-container');
    var frameSrc = container.attr('myurl');
    $('#myiFrame').attr("src", url);
            $('#myiFrame').reload();
       }
      }
    }