Pass values into iframe not using GET

Question

I have an iframe that I was formally creating using a url with some vars that I was passing in as a GET. Is it possible to set the source page and pass in the variables as a POST or something? Or really, if it's possible to somehow get at the variables stored in the parent I'd be fine with that as well.

Alec Gorge · Accepted Answer · 2013-12-04T21:31:25.603

5

Use window.parent from within the iframe.

In the parent window:

window.passingObj = { "key" : "value" };

In the iframe:

alert(window.parent.passingObj["key"]); // value

edited Dec 04 '13 at 21:31

answered May 04 '11 at 20:31

Alec Gorge

17,110
10
59
71

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

Two helpful posts:

iframe accessing parent DOM? (iframe to parent)

Invoking JavaScript code in an iframe from the parent page (parent to iframe)

edited May 23 '17 at 10:28

Community

1
1

answered May 04 '11 at 20:31

farinspace

8,422
6
33
46

score 0 · Answer 3 · answered Aug 03 '12 at 13:46

For what you're saying I gather that you don't want to use the url to pass your parameter.

Depending on where the javascript is executed you have these options:

If executed in the container window you would do something like this

...
var el = document.getElementById('targetFrameId');

getIframeWindow(el).someFunction('value1', 'value2', ...);
// or
getIframeWindow(el).someVariable = {key1:'value1', key2:'value2', ...};
...

If executed in the iframe window you would do something like this
```
... window.parent.something ... ;
```

Annexe

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

score 0 · Answer 4 · answered May 04 '11 at 20:28

If you only need access in javascript then you can use the hash.

iframe.src="http://foo.bar/#arg1=1&arg2=2";

and then in the page you just extract them from location.hash.substring(1).

this is boilerplate code for getting these args into a 'map':
(from my library easyXDM)

var query = (function(input){
    input = input.substring(1).split("&");
    var data = {}, pair, i = input.length;
    while (i--) {
        pair = input[i].split("=");
        data[pair[0]] = decodeURIComponent(pair[1]);
    }
    return data;
}(location.hash);

query.arg1; // 1
query.arg2; // 2

score 0 · Answer 5 · answered May 04 '11 at 20:31

0

If both pages are in the same domain, you can access variables defined in the container page from the iframe using

parent.varName

answered May 04 '11 at 20:31

Ruan Mendes

90,375
31
153
217

score 0 · Answer 6 · answered May 04 '11 at 21:14

You can use variables and method from the parent window of the iframe simply using the parent object; for instance, if you have this in the parent window:

var someObject = {key1:'value1' , key2:'value2'};
function test(key)
{
    alert(someObject[key]);
}

you can do this in the child iframe:

parent.test('key1');
alert(parent.someObject.key2);

Keep in mind it is only possible if the iframe and its parent belong to the same domain (Same Origin Policy).

Pass values into iframe not using GET

6 Answers6