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

Posted 2023-02-22

【中文标题】如何将数据传递给iframe中的变量

【英文标题】：how to pass data to variables in iframe

【发布时间】：2020-02-02 21:41:01

【问题描述】：

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

我的情况是

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

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

希望我的观点清楚 请帮忙

【问题讨论】：

可以通过url参数发送有限信息***.com/questions/39266970/…

@leo 对我来说太有限了我需要自定义事件之类的东西......

我想知道您是否可以使用MDN postMessage 将数据从父级发送到 iframe。只要您可以访问 iframe 的 Window 元素，我认为您可以。

您可以使用javascript将数据发送到远程服务器。 w3schools.com/xml/tryit.asp?filename=tryxml_httprequest

@Vykintas 它可能有效，但我想将它与 iframe 一起使用

【参考方案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 () 访问跨域框架时被捕获。如果您禁用网络安全，它将正常工作

【参考方案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

【讨论】：

可以反向使用吗？我希望主文档发布到 iframe

【参考方案3】：

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

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

例如

<div class="my-frame-container" myurl="http://myserver.com" elementid="mycontainerframe"><iframe id="myiFrame" src="" allowtransparency="true"   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();
       
      
    

【讨论】：

不，我不想将属性添加到 src 并将其作为参数读取

更新了我的答案对你有用吗，你可以在监听器中做你想做的事，我只是加载它，你不需要。