Pass value to iframe from a window

Asked 11/2, 2009 at 12:20 Answered 2/7, 2023 at 12:59

javascript html iframe

101

I need to send a value to an iframe.

The iframe is present within the current window. How can I achieve this?

I need to do it with javascript in the parent window that contains the iframe.

Osteotomy answered 11/2, 2009 at 12:20 Comment(2)

https://mcmap.net/q/99102/-how-do-you-post-to-an-iframe – Mouflon 16/7, 2020 at 12:22

alfilatov.com/posts/… – Shadwell 7/11, 2020 at 5:12

100

Depends on your specific situation, but if the iframe can be deployed after the rest of the page's loading, you can simply use a query string, a la:

<iframe src="some_page.html?somedata=5&more=bacon"></iframe>

And then somewhere in some_page.html:

<script>
var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
 {
data[params[x].split('=')[0]] = params[x].split('=')[1];
 }
</script>

Susie answered 11/2, 2009 at 12:29 Comment(6)

Mate I want to thank you for your answer - it solved a linchpin show stopper! if you add an answer to this question Ill mark it correct: #2856099 – Hospitaler 24/5, 2010 at 6:57

For this problem this was the easiest answer to implement. I recommend it. – Kali 25/7, 2014 at 11:54

But this is limited by the maximum length of a URL on a specific browser :( – Irresponsive 17/2, 2016 at 17:5

The best part is:: It works for the cross-domain. Best for creating a game which can be initialized in different sites with different config. Awesome answer. Helped a lot. – Furrow 3/7, 2017 at 14:6

Nice solution when our job is just simple. No handshaking communication is needed. – Madeira 22/3, 2018 at 8:40

You can also use location.search to get all the query parameters including the ?. – Trashy 1/12, 2019 at 15:41

First, you need to understand that you have two documents: The frame and the container (which contains the frame).

The main obstacle with manipulating the frame from the container is that the frame loads asynchronously. You can't simply access it any time, you must know when it has finished loading. So you need a trick. The usual solution is to use window.parent in the frame to get "up" (into the document which contains the iframe tag).

Now you can call any method in the container document. This method can manipulate the frame (for example call some JavaScript in the frame with the parameters you need). To know when to call the method, you have two options:

Call it from body.onload of the frame.
Put a script element as the last thing into the HTML content of the frame where you call the method of the container (left as an exercise for the reader).

So the frame looks like this:

<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>

And the container like this:

<script>
function setUpFrame() { 
    var frame = window.frames['frame-id'].contentWindow;
    frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>

Magocsi answered 11/2, 2009 at 12:45 Comment(1)

If the frame is accessed by its id then I have to access it through contentWindow in window.frames['frame-id'].contentWindow MDN – Plectognath 23/10, 2020 at 21:55

Here's another solution, usable if the frames are from different domains.

var frame = /*the iframe DOM object*/;
frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);

And in the frame itself:

window.addEventListener('message', function(event) {
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
    if (origin !== /*the container's domain url*/)
        return;
    if (typeof event.data == 'object' && event.data.call=='sendValue') {
        // Do something with event.data.value;
    }
}, false);

Don't know which browsers support this, though.

Guano answered 11/1, 2017 at 15:26 Comment(2)

Best answer for me. Thank you! – Cerumen 1/8, 2018 at 21:48

Useful, though I believe the event.originalEvent.origin bit for Chrome is outdated; my testing with Chrome 79 in December 2019 shows that it uses event.origin. – Nsf 30/12, 2019 at 17:2

Two more options, which are not the most elegant but probably easier to understand and implement, especially in case the data that the iframe needs from its parent is just a few vars, not complex objects:

Using the URL Fragment Identifier (#)

In the container:

<iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>

In the iFrame:

<script>
var dataFromDocument = location.hash.replace(/#/, "");
alert(dataFromDocument); //alerts "dataToFrame"
</script>

Use the iFrame's name

(I don't like this solution - it's abusing the name attribute, but it's an option so I'm mentioning it for the record)

In the container:

<iframe name="dataToFrame" src="http://url_to_iframe"></iframe>

In the iFrame:

<script type="text/javascript">
alert(window.name); // alerts "dataToFrame"
</script>

Pediform answered 11/12, 2013 at 13:10 Comment(2)

Can't we use URL parameters in iframe src URL ..? – Lanham 27/1, 2017 at 12:2

@Lanham I think you can but the problem is that if the data is sensitive, you might not want it to be logged on the server – Sapowith 12/4 at 6:0

Use the frames collection.

From the link:

var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) { 
  // do something with each subframe as frames[i]
  frames[i].document.body.style.background = "red";
}

If the iframe has a name you may also do the following:

window.frames['ponies'].number_of_ponies = 7;

You can only do this if the two pages are served from the same domain.

Felicitation answered 11/2, 2009 at 12:27 Comment(2)

can this be done from the iframe to the parent frame with different domains? – Insinuating 15/12, 2011 at 22:2

How do I access number_of_ponies inside the iframe? I feel I'm missing something obvious :/ – Treachery 4/4, 2017 at 16:42

We can use "postMessage" concept for sending data to an underlying iframe from main window.

you can checkout more about postMessage using this link add the below code inside main window page

// main window code
window.frames['myFrame'].contentWindow.postMessage("Hello World!");

we will pass "Hello World!" message to an iframe contentWindow with iframe id="myFrame".

now add the below code inside iframe source code

// iframe document code
function receive(event) {
    console.log("Received Message : " + event.data);
}
window.addEventListener('message', receive);

in iframe webpage we will attach an event listener to receive event and in 'receive' callback we will print the data to console

Dioecious answered 2/4, 2019 at 5:12 Comment(0)

Incase you're using angular and an iframe inside, you'll need need to listen to the iframe to finish loading. You can do something like this:

         document.getElementsByTagName("iframe")[0].addEventListener('load', () => {
            document.getElementsByTagName("iframe")[0].contentWindow.postMessage(
                {
                    call: 'sendValue',
                    value: 'data'
                },
                window.location.origin)
        })

You will have to get the iframe one way or another (there are better ways to do it in angular) and then wait for it to load. Or else the listener won't be attached to it even if you do it inside lifecycle methods like ngAfterViewInit()

Gileadite answered 22/1, 2021 at 0:34 Comment(0)

Have a look at the link below, which suggests it is possible to alter the contents of an iFrame within your page with Javascript, although you are most likely to run into a few cross browser issues. If you can do this you can use the javascript in your page to add hidden dom elements to the iFrame containing your values, which the iFrame can read. Accessing the document inside an iFrame

Scope answered 11/2, 2009 at 12:26 Comment(0)

Just another way. From iframe you can add event listeners and dispatch events into parent document:

parent.document.addEventListener('iframe-event', (e) => {
    console.log('iframe-event', e.detail);
});

setTimeout(() => {
    console.log('dispatchEvent from iframe');
    const event = new CustomEvent('frame-ready', { detail: 'parent event dispatched from iframe' });
    parent.document.dispatchEvent(event);
}, 1000);

And from parent you can add event listeners and dispatch events in its own document:

document.addEventListener('frame-ready', (e) => {
        const event = new CustomEvent('iframe-event', { detail: 'iframe event dispatched from parent' });
        document.dispatchEvent(event);
    });

Also if in any case you need to open this frame in a new tab you can still use events for communication. From your frame/tab:

if (opener) {
        const event = new CustomEvent('frame-ready', { detail: 'parent event dispatched from new tab' });
        opener.document.dispatchEvent(event);
    }

From your parent/opener:

window.open('my-frame.html', '_blank');

document.addEventListener('frame-ready', (e) => {
    const event = new CustomEvent('iframe-event', { detail: 'iframe event dispatched from parent' });
    document.dispatchEvent(event);
});

Just be aware that window.open will expose your DOM to next page it opens, so if you use it to open any third part url, you must always use rel=noopener to avoid security issues:

window.open('third-part-url.html', '_blank', 'noopener');

Pyongyang answered 24/5, 2021 at 17:46 Comment(0)

In your main homepage, add this line-

window.postMessage("Hello data from Homepage");

Inside your iframe , add this line-

window.addEventListener("message", receiveDataFromWeb);

const receiveDataFromWeb=  (data)=> {
    console.log(data);
    //this should print Hello data from Homepage
}

Myongmyopia answered 8/6, 2021 at 19:37 Comment(0)

-1

What you have to do is to append the values as parameters in the iframe src (URL).

E.g. <iframe src="some_page.php?somedata=5&more=bacon"></iframe>

And then in some_page.php file you use php $_GET['somedata'] to retrieve it from the iframe URL. NB: Iframes run as a separate browser window in your file.

Dorthadorthea answered 6/11, 2019 at 9:10 Comment(0)

-1

<html>
<head>
    <title>Host</title>
    <script type="text/javascript">
    
        function send() {
            const frame = document.getElementById("ifrm");
            frame.contentWindow.postMessage({call:'sendValue', value: "test"}, '*');
        }
    </script>
</head>
<body>
    Hi I am host
    <iframe id="ifrm" src="http://localhost:8001/Desktop/Explisoft.com/temp/iframe.html"></iframe>
    <button onclick="send()">Send message</button>
</body>

<html>
<head>
    <title>IFrame</title>
</head>
<body>
    Hi I am iframe
</body>
<script type="text/javascript">
    window.addEventListener('message', function(event) {
        var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
        if (origin !== "http://localhost:8000")
            return;
        if (typeof event.data == 'object' && event.data.call=='sendValue') {
            console.log(event.data);
        }
    }, false);
</script>

Ancipital answered 2/7, 2023 at 12:59 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags