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

问题描述 投票:0回答:2

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

我的场景是

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

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

希望我阐明我的观点请帮助

javascript html iframe
2个回答
0
投票
最好的方法是使用事件总线JavaScript

//main doc window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { console.log(event); // ... } //iframe window.parent.postMessage('test', *);

请注意CORS有问题

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


0
投票
我了解到您需要在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(); } } }

© www.soinside.com 2019 - 2024. All rights reserved.