Pass a Javascript Object to an HTML iframe (as an Object)

Question

A MainWindow creates a JavaScript object that the ChildWindow needs to utilize utilize.

My MainWindow.html looks like this at the moment

<html>
  <body>
    <script>
      var varObject = {type:"Error", message:"Lots"};
    </script>
    <iframe class="child" src="ChildWindow.html"></iframe>
  </body>
</html>

The ChildWindow.html looks like this

<html>
  <body>
    <script>
      console.log(varObject.type); // goal is to log "Error"
    </script>
  </body>
</html>

The ChildWindow is trying to use the object that was created in the MainWindow which of course it can't because I don't yet know how to pass it.

I've tried to Google this but most of the solutions I found involved passing the values as strings instead of as a variable.

Maximillian Laumeister · Accepted Answer · 2020-01-28 00:28:13Z

13

One can simply pass the object by assigning the object to the window of the iframe.

in the parent window:

var frame = document.querySelector("iframe");
frame.contentWindow.object_of_interest = object_of_interest;

in the iframe'ed window

console.log(window.object_of_interest);

edited Jan 28, 2020 at 0:28

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

answered Feb 8, 2018 at 2:30

Ulad Kasach

13.1k13 gold badges69 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abdolence Over a year ago

Must be contentWindow instead contextWindow?

Hibuki Over a year ago

Worked for me with contentWindow, as @abdolence suggested.

Oram Over a year ago

SecurityError: Permission denied to access property "object_of_interest" on cross-origin object

Ulad Kasach Over a year ago

@Oram - the "website" in the iframe must allow cross-origin access (or have the same origin) in order for you to modify its data. There are lots of security risks that could be exploited if browsers let users open other websites and modify the data in those websites with no restrictions.

Oram Over a year ago

I added the comment because you can't "simply pass the object". You have restrictions as you mentioned in your reply.

jasmin_makasana · Accepted Answer · 2018-02-08 06:59:47Z

Please have a look at following code :

<html>
  <body>
    <script>
      var varObject = {type:"Error", message:"Lots"};
      var child = document.getElementsByClassName("child")[0];
      var childWindow = child.contentWindow;
      childWindow.postMessage(JSON.stringify(varObject),*);
    </script>
    <iframe class="child" src="ChildWindow.html"></iframe>
  </body>
</html>

In ChildWindow.html

<html>
  <body>
    <script>
      function getData(e){
        let data = JSON.parse(e.data);
        console.log(data);
      }
      if(window.addEventListener){
        window.addEventListener("message", getData, false);
      } else {
        window.attachEvent("onmessage", getData);
      }
    </script>
  </body>
</html>

Hope it helps :)

Daniel Diekmeier · Accepted Answer · 2016-03-17 09:12:01Z

3

You should use window.postMessage to send messages to and from iFrames embedded in your site.

answered Mar 17, 2016 at 9:12

Daniel Diekmeier

3,46420 silver badges37 bronze badges

3 Comments

TheLovelySausage Over a year ago

It's not necessarily going to be a message, sometimes it will be database connection objects

Daniel Diekmeier Over a year ago

You can use JSON.stringify(obj) to convert your objects to strings and JSON.parse(str) to convert them back again.

Ulad Kasach Over a year ago

This does not work if the object is a promise or a function or any other more complex object structure.

Collectives™ on Stack Overflow

Pass a Javascript Object to an HTML iframe (as an Object)

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related