CODEWITHSUNDEEP
javascriptjqueryiframe
coderunner
coderunner

Reputation: 935

Updating a parent javascript object in iframe and obtaining the updated value in iframe back in the parent

I have a document with an iframe in it

 <body>
 <script>
  globalObj = {};
  globalObj.myname = 'sachin';
  globalObj.age = '25';
</script>

<form name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx"> 
<input type = "hidden" name = "LinkId" value ="ae7263c8-b030-4ca8-9a98-f64308bb2a8e" />                             
<input type = "image" src ="//testcontent.authorize.net/images/donate-gold.gif" />
</form>
 <script type="text/javascript">
console.log('firts====>');console.log(globalObj);
</script>
<iframe src="iframe.html">

</iframe>
<script type="text/javascript">
console.log('2nd----->');console.log(globalObj);

 </script>

iframe.html

 <html>
  <head>


  </head>
  <body>
<script type="text/javascript">
//console.log(parent.globalObj);
//alert('testts-->'+parent.myVar);
    parent.globalObj.myname = 'vikas';
    console.log('updated---->');console.log(parent.globalObj);

</script>
   </body>
   </html>

What I want to achieve is,once I update the value in the iframe of the globalObj i want to get the updated value back in the parent document and not the orignal value. How can I achieve it.The iframe and the html page are on the same domain.

Upvotes: 1

Views: 154

Answers (1)

Schien
Schien

Reputation: 3903

Add a function in your host page:

<script>
function updatename(name,age){
  globalObj.name=name;
  globalObj.age=age;
}
</script>

Then in your iframe page:

<script>
parent.updatename('vikas',23);
</script>

You can access variables on the host page directly, but be careful with scoping. I always use "document" as the global variable container. In host page:

document.globalObj={myname:'sachin',age:23};

In iframe page:

parent.document.globalObj={myname:'vikas',age:23};

Upvotes: 1

Related Questions