Pass Value to Iframe from a Window

how to pass data to variables in iframe

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

passing in javascript values into iframe tag

The only way you can pass values directly to an iframe of a page with a different domain is through the url, as querystring values, anchors, or perhaps some form of rewriting. Even if it's on the same domain, that's probably the easiest and safest way to pass it.

Main document:

document.getElementById('IframeID').src = "somepage.html?seed=" + custom_seed;

Inner document:

var seed = window.location.search.substring(window.location.search.indexOf('seed=') + 5);
if (seed.indexOf('&') >= 0) {
    seed = seed.substring(0, seed.indexOf('&'));
}

pass a javascript variable from an iframe to the parent frame

If the pages are both on the same domain, you could call a function of the parent window:

window.parent.zipPhoneCallback(zipphone);

In the parent window, you could define a function like this:

function zipPhoneCallback(zipphone) {
    ((console&&console.log)||alert)("zipphone = " + zipphone);
}

How to pass parameters through iframe from parent html?

On the main page simply pass parameters as follows

function myFunction(){
$('#myIframe').attr('src', "myIframeRequest.html?param1=value1¶m2=value2"); 
} 

In Iframe

You can use a script to get the desired parameter value from parameters passed to page.

<script>
function getParamValue(paramName)
{
    var url = window.location.search.substring(1); //get rid of "?" in querystring
    var qArray = url.split('&'); //get key-value pairs
    for (var i = 0; i < qArray.length; i++) 
    {
        var pArr = qArray[i].split('='); //split key and value
        if (pArr[0] == paramName) 
            return pArr[1]; //return value
    }
}
</script>

Then you can fetch the value of desired parameter like this

var param1 = getParamValue('param1');

Pass an Event to an iframe from the parent window? ( Javascript )

Finally I have sorted out the issue. I have used parent.document on my iframe to catch the events from the parnet side and create them again on iframe and it works great!

How to pass data from ifram to parent

You can use the window.postMessage() method safely (enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it like in your example).

This is a basic example for a duplex communication between a parent and an Iframe.

Parent -> IFrame

   iframe.contentWindow.postMessage('hello world', '*'); // from parent

window.onmessage = function(e) { // inside the iframe
    if (e.data == 'hello world') {
        alert('It works!');
    }
};

IFrame -> Parent

window.onmessage = function(e) { // inside the parent
    if (e.data == 'hello world') {
        alert('It works!');
    }
};

window.top.postMessage('hello world', '*') //inside the iframe

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

---

Related Topics