html - javascript cross domain iframe resize - Stack Overflow

admin管理员组

文章数量:1323150

I have an iframe pulling in an image and some rows of data (cross domain). The iframe is created with an imbedded javascript file like this:

    <script type="text/javascript" src=".js?blah_id=001" id="blah_script"></script>

The iframe is being created and its loading the images and data perfectly... so far, so good.

Inside the iframe I want to hide the rows of data and shorten the height of the iframe [-] and when the image is clicked [+] expand the height of the iframe and unhide the rows. I placed the rows in a .

Below is a cut back version of the function being called onclick (and it IS being called). The first line in the function shows how I'm generating the szFrameName and the $folder_id is 001 which is reflected in the szSpanName. When alert() gets called it shows: "blah_iframe_001 blah_cmpnt_001" so the names are correct however the document.getElementById returns null on the blah_iframe but works fine on the blah_cmpnt_

function onclickToggle()
{
  var szFrameName = 'blah_iframe_' +"<?php echo $folder_id; ?>";
  var szSpanName = "blah_cmpnt_" +"001";
  var idFrame = document.getElementById(szFrameName);
  var idCmpnt = document.getElementById(szSpanName);

  alert(szFrameName +" " +szSpanName);
}

I've tried window.frameElement but that produces an "access denied" error so how do I resize/shorten the iframe?

I have an iframe pulling in an image and some rows of data (cross domain). The iframe is created with an imbedded javascript file like this:

    <script type="text/javascript" src="http://www.domain./blah/scriptfile.js?blah_id=001" id="blah_script"></script>

The iframe is being created and its loading the images and data perfectly... so far, so good.

Inside the iframe I want to hide the rows of data and shorten the height of the iframe [-] and when the image is clicked [+] expand the height of the iframe and unhide the rows. I placed the rows in a .

Below is a cut back version of the function being called onclick (and it IS being called). The first line in the function shows how I'm generating the szFrameName and the $folder_id is 001 which is reflected in the szSpanName. When alert() gets called it shows: "blah_iframe_001 blah_cmpnt_001" so the names are correct however the document.getElementById returns null on the blah_iframe but works fine on the blah_cmpnt_

function onclickToggle()
{
  var szFrameName = 'blah_iframe_' +"<?php echo $folder_id; ?>";
  var szSpanName = "blah_cmpnt_" +"001";
  var idFrame = document.getElementById(szFrameName);
  var idCmpnt = document.getElementById(szSpanName);

  alert(szFrameName +" " +szSpanName);
}

I've tried window.frameElement but that produces an "access denied" error so how do I resize/shorten the iframe?

• javascript
• html
• iframe
• resize

Share Follow edited Oct 1, 2013 at 1:06 ppetree asked Sep 17, 2013 at 18:03 ppetreeppetree 81633 gold badges1515 silver badges3131 bronze badges 3

• Due to cross-domain security restrictions, you're not generally allowed to manipulate the contents of a cross-domain iframe from the outside. Do you control both domains? If not, you're probably out of luck. – user1618143 Commented Sep 17, 2013 at 18:47
• No. I control the source of the js that creates the iframe and I control the contents of the iframe window but these can appear on any domain (like the js that creates a google advert). I was playing with window.postmessage but I'm not getting anywhere... – ppetree Commented Sep 17, 2013 at 19:34
• Hmm. In that situation, there may be a workaround, but I don't know how to do it. – user1618143 Commented Sep 18, 2013 at 13:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In hopes that this will help someone else, I created 3 files on github that shows exactly how to do this... cross domain iframe resizing at its finest.

https://github./ppetree/iframe_resize.git

Having looked a lots of different solutions to this I ended up writing a simple library to take a account of a number of different use cases. As I needed a solution that supported multiple user generated iFrames on a portal page, supported browser resizes and could cope with the host page JavaScript loading after the iFrame. I also added support for sizing to width and a callback function and allow the override of the body.margin, as you will likely want to have this set to zero.

https://github./davidjbradshaw/iframe-resizer

The iFrame code is just a little self-contained JavaScript, so that it's a good guest on other people pages.

The script is then initialised on the host page and has the following available options. More details on what these do on the GitHub page.

iFrameSizer({
    log: false,
    bodyMargin:null,
    sizeHeight:true,
    sizeWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

If you set enablePublicMethods, it gives you access in the iframe to manually set the iFrame size and even remove the iframe from the host page.

本文标签： htmljavascript cross domain iframe resizeStack Overflow