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

Question

我正在开发一个连接本地服务器和全局服务器(服务器无法通信)的项目，服务器通过套接字io与html文件通信我对这个概念很陌生

我的场景是

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

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

希望我的观点清楚请帮忙

Answer 1

据我了解，您需要在 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();
       }
      }
    }