how to pass data to variables in iframe

Question

I am working on project which connects a local server and global server (servers cant communicate) server communicate to html files via socket io I am very new to this concept

my scenario is

browser connects to local app
local server sends html page which has iframe in it and iframe's source is global server
global server sends html page my browser is showing html page in the global server and my local server is also running

how can I pass data from local server to global server? basically local server sends data to container html file and it passes data to the html file in iframe so that it can pass data to global server maybe a method is called from container html to iframe html and sends data ? is it possible?

hope I made my point clear please help

you can send limited information through url parameters https://stackoverflow.com/questions/39266970/what-is-the-difference-between-url-parameters-and-query-strings — leo, Oct 04 '19 at 14:29
@leo its way too limited for me I need something like custom events or something... — eomer, Oct 04 '19 at 14:33
I wonder if you could use [MDN postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to send data from the parent to the iframe. So long as you can access the iframe's Window element, I would think you could. — Taplar, Oct 04 '19 at 14:36
You can use javascript to send data to remote server. https://www.w3schools.com/xml/tryit.asp?filename=tryxml_httprequest — Vykintas, Oct 04 '19 at 14:40
Does this answer your question? [How to communicate between iframe and the parent site?](https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site) — Michael Freidgeim, Jun 01 '22 at 20:27

Sarthak Gupta · Accepted Answer · 2019-10-04T15:12:36.837

What i understood that you need to pass some kind of variable in iframe so you can append your iframe's "src" property with it in the form of querystring.

You can get this querystring value while reloading of iframe.

e.g.

<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',                        
                },
                "*"
            );

and in the iframe js file you can add a event listener

     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();
       }
      }
    }

no I dont want to add attributes to src and read it as a parameter — eomer, Oct 04 '19 at 14:49
updated my answer will it work for you, you can do what you want to do in the listener, i simply loading it not necessary for you. — Sarthak Gupta, Oct 04 '19 at 15:13

Tohm · Answer 2 · 2019-10-04T15:36:06.683

0

The best way is using event bus 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', *);

be aware of CORS problematic

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

More complet exemple

edited Oct 04 '19 at 15:36

answered Oct 04 '19 at 14:40

Tohm

305
1
5

can it be used reverse? I want main doc to post to iframe – eomer Oct 04 '19 at 14:45

score -1 · Answer 3 · answered Oct 07 '19 at 10:35

post message works fine but instead of post message you can call methods inside frame like an instance

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

and you can call method from inside iFrame to main like

window.top.method();

BUT it will get caught on Uncaught DOMException: Blocked a frame with origin () from accessing a cross-origin frame. if you disable-web-security it will work fine

how to pass data to variables in iframe

3 Answers3