Cross-Domain Iframe Resize

How can I resize a cross-domain iFrame that I do not have control over

Based on the comments I received, it seems safe to say that it is impossible to re-size a cross-domain iFrame from the client/browser side.

Perhaps some complex server-side algorithm could request the page and attempt to give hints about the size, but nothing can be done on the client-side.

cross-domain iframe resize

The thing is - there is no other way than using Cross-Domain Messaging for this since you need to get the computed height from a document in one domain, to a document in a different domain.

So, either you do this using postMessage (works in all moder browsers), or you spend 5 minutes adapting the resize iframe example from easyXDM.

The other party really just needs to copy a few files onto their domain, and add a single line of code to their document..

Dynamically resize iframes in a cross-domain site

You can try using the iframe resizer jquery plugin. It works for me.

Just download these js files:

jquery-1.11.1.js
IframeResizer.js
IframeResizer.contentWindow.min.js

In your www.ADomain.com add this code block in the page that has the iframe.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="iframeresizer.min.js"></script>
<script type="text/javascript" src="iframeresizer.contentwindow.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#IframeID').iFrameResize({
            autoResize: true,
            enablePublicMethods: false,
            sizeWidth: false,
            heightCalculationMethod: 'bodyScroll'
        });
    });
</script>

Then in your www.BDomain.com add this code block in the page that will be loaded to the iframe to avoid hitting that anoying error called "sometimes my iframe is not resizing". This will create an instance of the resizer.

Put this jquery library inside the <head> </head> part of your page.
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
Put this line in the last part of your code before the </body>
<script type="text/javascript" src="iframeresizer.contentwindow.min.js">

Hope this will help you. Good luck bro!

How to resize a cross domain iframe when content changes?

I found, not the ultimate, but the "good enough for me" answer:
I made a "cikkek.php" on the server and called the tumblr blog with include and now it works fine with option 2(, however the buttons at the bottom right of the posts don't work, it resizes if i click the "read more" button).

<?php
    include 'http://fiktivcikkek.tumblr.com/';
?>

Cross-Domain Iframe Resize

How can I resize a cross-domain iFrame that I do not have control over

cross-domain iframe resize

Dynamically resize iframes in a cross-domain site

How to resize a cross domain iframe when content changes?

Related Topics

Leave a reply