CODEWITHSUNDEEP
javascriptjqueryhtmliframeheight
markzzz
markzzz

Reputation: 48045

How can I change IFRAME height when the source it's on another domain?

I think this option is not avaiable, but maybe you know some strategies for doing it! I'm on http://www.mydomain.com, and I put an iframe with jquery of another domain :

​<div id="myContent​​​​​​​"></div>​

$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');​

Well, the page that I load, www.anotherdomain.com, it's mine, so I can add any kind of code!

What I'd like to do is set the height of myFrame regard the real size of the loaded page (which I can't know, it can changes during the time).

Is there a method where I can comunicate to the parent DOM (mydomain.com) the size of the inserted page (anotherdomain.com)?

I don't know it, I dubt so, but why don't ask.

Upvotes: 0

Views: 1545

Answers (3)

adriendenat
adriendenat

Reputation: 3485

The only solution I found for that was to pass iframe height via url. You can find my test here :

http://jsfiddle.net/Grsmto/nBWrJ/2/ (updated)

This solution works cross browsers (chrome, ff, ie all versions, mobile etc.) and cross domain.

You MUST have access to the iframe code itself AND the iframe host. You can refresh the iframe height when you want (even if content change) just by calling the publishHeight() function inside your iframe.

This should work without jquery (mostly writen in pure javascript...). The only inconvenient is that you will have the height in the url like :

http://www.yourdomain.com/index.html#1458px

But you should easily remove it or change it to something less ugly.

EDIT : It seems that Disqus and Twitter use this library to do that : http://easyxdm.net/wp/

EDIT 2 : On your page you put the code on the first jsfiddle page. In your iframe you put the code of the iframe (the red div "myiframe" in bottom right). Hope it's clear... But check my link below it should be a better and easier solution.

Upvotes: 1

Downpour046
Downpour046

Reputation: 1671

Cross-domain communications are very limited, and impossible depending on the on the remote host. http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ You can use JSONP to try and retrieve information from the remote site, but its very trying and not for beginners.

The work around that I found that worked for me was I used a server side language instead to include the remote file. so instead of < iframe >

I did a PHP server-side include like:

<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>

This of course only applies if you are using PHP. Once I included it that way I was able to manipulate the DOM elements.

Upvotes: 1

lamplightdev
lamplightdev

Reputation: 2091

You can send messages (such as the height of the frame) between iframes on different domains using postMessage: https://developer.mozilla.org/en/DOM/window.postMessage

Upvotes: 2

Related Questions