Quantcast
Channel: Resizing an iframe based on content - Stack Overflow
Viewing all articles
Browse latest Browse all 28

Answer by Selvamani for Resizing an iframe based on content

$
0
0

Finally I found some other solution for sending data to parent website from iframe using window.postMessage(message, targetOrigin);. Here I explain How I did.

Site A = http://foo.comSite B = http://bar.com

SiteB is loading inside the siteA website

SiteB website have this line

window.parent.postMessage("Hello From IFrame", "*"); 

or

window.parent.postMessage("Hello From IFrame", "http://foo.com");

Then siteA have this following code

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";var eventer = window[eventMethod];var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";// Listen to message from child IFrame windoweventer(messageEvent, function (e) {   alert(e.data);   // Do whatever you want to do with the data got from IFrame in Parent form.}, false); 

If you want to add security connection you can use this if condition in eventer(messageEvent, function (e) {})

if (e.origin == 'http://iframe.example.com') {    alert(e.data);     // Do whatever you want to do with the data got from IFrame in Parent form.}

For IE

Inside IFrame:

 window.parent.postMessage('{"key":"value"}','*');

Outside:

 eventer(messageEvent, function (e) {   var data = jQuery.parseJSON(e.data);   doSomething(data.key); }, false);

Viewing all articles
Browse latest Browse all 28

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>