davidjbradshaw / iframe-resizer Goto Github PK

Hi,

Everything is ok for Firefox and IE but not in Chrome (version 34.0). How I can force/help Chrome to make into account the correct height of my iframe? Actually, the content of my iframe is built dynamically according to the data that I want to show. How I can force your plugin to detect the window resizing in chrome (this is my major problem)?

Thanks in advance for your help.

Regards.

Samir.

Hi David,

I've got ~1000 really old html pages that i'm slowly converting into realistically maintainable files.

In the meantime I'm using your iframe-resizer and will be adding the contentwindow.js to all of those pages. How would I assign a height of say 2000px to my iframe if the loaded page fails to contain contentwindow.js? When the two pages begin to talk then i'd like the resizer to correctly size.

Is there any sort of FailedInitCallback option I can leverage? Or will this need to be handled outside of this library?

Trying to give some large height (to buy time) while I work through adding contentwindow to the necessary files.

Hello,

I've been searching for something like this for a while.

Have just implemented it and am throw this error in the console:

Cannot call method 'extend' of undefined

Using asp.net, jQuery 1.9.1..

I think my iFrame cant be found, I'll update this shortly

Your code is a marvel, working well for me despite my having next to no idea what is going on.

I would like to be able to put a button inside one of my iframes (a menu which occupies a virtual column) so the user can hide that iframe. However I would then like to resize the parent page in response. It seems to me that your window.parentIFrame.sendMessage() method would be one good way of initiating such an adjustment, but I have great difficulty figuring out how things work without an example.

Would you be kind enough to produce the simplest example you can manage (without jquery or $bling please) of this callback method in use. Just sending a literal string from within iframe code that is then displayed by the parent inline or with an alert or anything similar would be most appreciated.

I have a .NET application running in the iframe, but the dynamic content does not expand the frame height. As soon as I resize the browser it expands. It seems it is working well, just not with the dynamic resizing based on the content within the frame:

http://mentalhe.nextmp.net/mobiletest/test.html

Any insight appreciated - thank you for the great plugin.

Hello Dave,

Firstly I'd like to thank you for creating this fantastic script.

It's working perfectly for me loading pages via http:// but when loading pages via https:// the auto re-sizing stops working.

I tried looking for past issues for this before posting but couldn't find any. This is my first post ever on Github so it may be that I don't know where to look (apologizes if this is the case).

I appreciate any assistance/feedback as to whether this can be done.

Thanks,
Jack

I have used your code to resize a header with buttons placed in an Iframe. You can see that setup here:
http://evolution-4-creationists.appspot.com/
but without your code yet.

I would like to use your code to also resize the menu on the left, which is also in an iframe. That menu is built around Ryan Seddon's: "Pure CSS collapsible tree menu" a simplified version of which can be seen here:
http://jsfiddle.net/Friar_Broccoli/jmw4L/

I've succeeded in getting your code to work for my menu to the extent that it resizes the frame (correctly) when I reload the page, however if I unfold part of the menu (causing the bottom of the menu to be hidden below the iframe) and then resize the browser window (which I presume fires the onresize() event) nothing happens. Only reloading the page causes the iframe to extend.

Can you suggest what I should be looking at here?

If the solution isn't obvious, and you're interested in examining my problem I would be happy to upload my best effort at getting your code to work on my future site above.

Thanks for your time.

On the latest version of Firefox I'm getting this error:
document.defaultView.getComputedStyle(...) is null

Any idea of how to fix?

I'm attempting to wrap a SharePoint app in an iFrame from another SharePoint App, and the iFrame grows 17px each cycle (cycle meaning every time the iframe resizes it gets another message and resizes again) It never stops growing.

is the stopInfiniteResizingOfIFrame() function what I want to use to make it stop this? Can I expose this as a public method and call it from my parent page?

Thanks,
Brad

Hi guys,

First of all, thanks for this awesome plugin, it saved my live and a lot of days diggin on web :D.

But going straight to the point, i had some problems with the integration of this plugin and my application and i saw that the problem it's a validation on code thats check if pages we are requesting is secured (my case) and if true, throws an error: "Unexpect message received from ....".

I setted secureConnection: false as an option on plugin initialization and it works like a charm, but i didn't found this option in documentation, isn't missing this option there?

Noticed you've committed changes for a 2.5.0 version but don't have a tag yet - is this intended?

Closed

Site: http://anycruise.ca
Settings:

                                enablePublicMethods      : false,                  
                heightCalculationMethod : 'bodyScroll',
                interval                : -33,
                autoResize          : true, 
                checkOrigin         : false,

The initial page loads in perfectly, but every subsequent page load (click on more details for any package) keeps the same height as the previous page. Though, anytime the page gets larger, it works fine. I've tried every heightCalculationMethod to no avail. Any ideas?

Hey I am using your iframe resizer and it works great but I also have the need to bookmark pages from inside my iframe to my parent page. I am trying to use window.parent.postMessage() to do this by sending an event to the parent frame when a link is clicked with the url of the link and this works fine if i disable your iframe resizer. But with both enabled the iframe just keeps resizing and I can see that an event loop is created where your iframe resizer keeps sending events repeatedly to my event. This doesn't seem to be a namespace issue.

simplified code snippet of my send / receive events (consider your plugin enabled an invoked):
// in the iframe:
...script....
document.forms.form.onsubmit = function() {
window.parent.postMessage(this.elements.msg.value, '*');
return false

// on parent page:
...script.....
window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt)
{
$('a').on('click', function() {
location.search = evt.data;
});
}

Hi
When I am using your plugin, almost exactly as your example the iframe is calculated to 150 px in height.

From the console:
IFrame (iFrameResizer0) height set to 150px
(the default iframe size)
The setup is crossdomain.
If I call
window.parentIFrame.size(250);
in the iframe it works.

You can see the iframe host here:
//s3-eu-west-1.amazonaws.com/sleeknoteboxcontent/5410.html

What am I doing wrong?

I want to set scrolling='yes' because i've more items to display in iframe. But plugin automatically set scrolling='no'.
before my Iframe: http://screencast.com/t/kSXbmZLNRL
and Now : http://screencast.com/t/Rrwuf5WuAERZ
Can you try this and let me know ?

The version of JQuery should not be updated?

I'm not sure how familiar you are with jquery mobile but it seems incompatible with the iframe-resizer in the contentWindow.

With JQM in the host page and not the iframe page the resizing works fine.

When JQM is included in the iframe page as well, the resizing of the iframe no longer works.

(the JQM git hub files can be seen at
https://github.com/jquery/jquery-mobile
)

Is there anything I can do, investigate or test?

Kind regards again
Adam

Happens only FF since updating from the previous version to 2.3. I haven't tried it with any earlier versions of FF. Error message pops up regardless of the heightCalculationMethod. I also have sizeWidth enabled.

Chrome and IE looking fine, really appreciate the update!

In IE11 (or any other version of IE), my initial frame loads in properly, though sometimes subsequent page loads cause the frame to constantly reset, grabbing a different height value every time.

Link:
Settings:

enablePublicMethods     : false,                  
                heightCalculationMethod : 'max',
                interval                : -33,
                autoResize              : true, 
                checkOrigin             : false,

To replicate: In IE, initial page loads in fine, on left hand side, click 'Search', next page loads in, and infinitely refreshes.

I tried changing the interval to 0, -X, and X and it didn't seem to fix the problem.

Any ideas?

EDIT: Also, as a side/unrelated question, how would I go about positioning the parent frame to the top of the page after each resize? (sometimes on a long page, if you click a link, you stay at the bottom of the page on the parent frame, leaving some people lost!

I get the following error in Firefox 29:

"TypeError: document.defaultView.getComputedStyle(...) is null"

The iframes I am resizing are created dynamically on the page with javascript and are inside a div that has "display: none" - so they are not visible when they are created (I do this because I want to animate the reveal of the iframe's content).

I tracked this problem down to line # 283 in iframeResizer.contentWindow.js:

"retVal = document.defaultView.getComputedStyle(el, null)[prop];"

I have fixed the problem by changing it to:

"retVal = document.defaultView.getComputedStyle(el, null);
if(retVal == null) retVal = {marginTop: 0, marginBottom: 0};
retVal = retVal[prop];"

Hi,

In my iFrame I am displaying a SQL report server generated report page. I do not have source code to this page. Can I use your code to detect when the report server resizes and then resize the containing iFrame? I cannot insert iframeResizer.contentWindow.min.js into the page SQL Report Server generates.

Thanks,

Jerry

If body has style height: 100% iframe is increasing it's height by few pixels.

Solution:
Preventive add style height: auto to body tag.

Hi,
the example pages bundles with the project does not work on IE8/IE9 while using a cross domain iframe.

Is there a solution to this bug?

Thanks

I'm embedding a small WP site on this page, and everything is working great on all the Mac browsers I've tested. However, I'm having difficulty with the PC implementation: IE8/9 and FF 28.0. The initial page sizes perfectly, but, when the user navigates to either the "Create" or "Remove" pages, no resizing takes place—the height remains the same as the initial load.

http://www.fellowshipnashville.org/classifieds-new/

Note: I am currently using 'scroll' for heightCalculationMethod.

In modern CSS frameworks box-model: border-box is applied globally ex.

*, *:before, *:after {box-model: border-box;}

When implementing iframeResizer in this environment, the height calculation is off slightly and the frame re-sizes continuously making the page repaint and the CPU shoots up to 100%.

Placing {border-box: content-box} globally seems to fix the issue but breaks the framework.

Any ideas on what can be done so iframeResizer can live happily inside a css framework?

If you need more info just let me know, Thanks in advance for any insight.

I have had some success in creating a nested iframe that also refits in the first iframe.

I have done this in the 'middle' page (the first iframe) by simply placing the iframeResizer.min.js after the contentWindow.min.js, as so (just before , as per example>)

    <script type="text/javascript" src="iframeResizer.min.js"></script> <!-- for iframe html holder page -->
    <script type="text/javascript" >
        //iframe resizing for child
        $('iframe').iFrameResize([{
            
        }]);
        console.log('end of body loaded');
    </script>

However, the following message appears in my chrome console log

[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]iFrameResizer0:500:533:init) iframeResizer.contentWindow.min.js:9

Is this in any way serious?

FIRST of all THANKS!

I have an iframe from the same website generating this message and then the mutationObserver warning spewing out.

the src of the iframe is not dynamic, and the iframe shows the correct source, its just that these warnings appear in the console log (chrome)

I tried to change checkOrigin to false but the 'src' of null means this fails too. (if I have understood correctly why)

Uncaught TypeError: Cannot read property 'src' of null iframeResizer.min.js:8
[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]tacticsStripIFrame:759:1498:init) iframeResizer.contentWindow.min.js:9
[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]tacticsStripIFrame:758:554:mutationObserver) iframeResizer.contentWindow.min.js:9
[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]tacticsStripIFrame:757:554:mutationObserver) iframeResizer.contentWindow.min.js:9
[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]tacticsStripIFrame:756:554:mutationObserver) iframeResizer.contentWindow.min.js:9
[iFrameSizer][tacticsStripIFrame] Unexpected message ([iFrameSizer]tacticsStripIFrame:754:554:mutationObserver)
etc etc

What other imformation could I supply to help?

ALSO... i am not sure if this related, but I have the iframe height slowly decreasing at the bottom, it appears it is creeping up as the seconds tick by.

Hi, sorry if my terminology is wrong, I am trying to iframe a website that is hosted on another server into a page on my server, and your code was given as a link that could do this?

Q. Does your code do this, or do I need access to both sites / files etc?

I cannot access the other websites files, it is a shutterfly website, so my code to call the page is this:

...and it needs to be embedded on our website in the appropriate area? Is this possible with your code? This has left me blank so far .

If it is possible to post a working example that would be great, as I have tried all examples and only get a height of approx 100px?

Many thanks in advance.

I try to integrate iframe-resize, but I came across the problem in Internet Explorer 8 browser.

I'm quite comfused, because in log is iFrame content height detected and set do value, but after that is "tirggred reset by host page" and height is set to zero. Isn't it bug?

Windows XP/ IE 8.0.6001

Thank you for feedback.

LOG: [iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0
LOG: [iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
LOG: [iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:false:true:null:max:null:null)
LOG: [iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:false:true:null:max:null:null)
LOG: [iFrameSizer][iFrameResizer0] Height calculation method set to "max"
LOG: [iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
     [iFrameSizer][iFrameResizer0] MutationObserver not supported in this browser!
LOG: [iFrameSizer][iFrameResizer0] setInterval: 32ms
LOG: [iFrameSizer][iFrameResizer0] Trigger event lock on
LOG: [iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:630:530:init)
LOG: [iFrameSizer][Host page] Received: [iFrameSizer]iFrameResizer0:630:530:init
LOG: [iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 630px
LOG: [iFrameSizer][Host page] Size reset requested by host page
LOG: [iFrameSizer][Host page] Get position: 0,0
LOG: [iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 0px
LOG: [iFrameSizer][Host page][reset] Sending msg to iframe (reset)
LOG: [iFrameSizer][iFrameResizer0] Page reset ignored by init
LOG: [iFrameSizer][iFrameResizer0] Trigger event lock off

// EDIT

I found out the problem. It is caused because initialization is triggered twice and IE8 has obviously problem. I fixed it using inicialization timeout and IE detection.

trigger('iFrame.onload',msg,iframe);
if (!isIE() && !firstRun && settings.heightCalculationMethod in resetRequiredMethods){
    resetIFrame({
        iframe:iframe,
        height:0,
        width:0,
        type:'init'
    });
}

I have an iframe that has resizing set for the height, and the content of which may include a pdf loaded in another iframe [insert xzibit joke here]. In Firefox and IE11 the resize on the outer iframe works great, in Chrome it never happens.

Example

Here's how I'm calling the iframe resizer

<iframe class="hgr" src="http://www.historygrandrapids.org/embeding/<?= $id ?>" width="100%" height="600" allowfullscreen></iframe>
<script type="text/javascript">
    iFrameResize({
        log:true,
        autoResize:false,
        enablePublicMethods:true,
        heightCalculationMethod:"max"
    },'iframe.hgr');
</script>

And the log from Chrome:

[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 iframeResizer.min.js:8
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0 iframeResizer.min.js:8
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:false:null:max:null:null)

If I remove the inner iframe, or set it to load something other than a PDF it works fine, only when there's a pdf does it not work. It's not outputting any errors to the console, it just appears to stop working part way through.

Hi! It's me again. I am integrated script (as you recommended), and script is working successfully. But I have problem with height calculating (it's very large iframe)
You can try

<iframe src="http://avia.make.travel" width="100%" scrolling="no"></iframe>

$('iframe').iFrameSizer({
contentWindowBodyMargin: 0,
doHeight: true,
doWidth: false,
interval: 32,
autoResize: true
});

After iframe loaded please click big blue button. Iframe will set height at 1776px around, but content is larger.

Hello. Thank you for your great library!
I have a question (or consult) about iframe content. There is any requirements? I changed your example - changed iframe src from "http://davidjbradshaw.com/iframe-resizer/example/frame.content.html" to "http://engine.aviasales.ru" (it's that what I needed), and Iframe still have it height.

Not sure if this is the best place to ask this question, because I don't think this is a problem with your plugin. I'm embedding some HTML forms that I don't have control over inside a web page, and as far as I can tell, I'm doing everything right. However, when I load the page, I see a number of "blocked a frame with origin "..." from accessing a cross-origin frame. Since these messages are from the domain hosting the iframe content, it seems likely this has nothing to do with your code or my code, but the content is trying to do something it shouldn't and I can't help but wonder if this is jacking up the resizing process. Does this make sense? Do you have any advice for working around this? Can I get you any info that might help? I am using jQuery 1.10.2, and this site is not currently live anywhere public.

Hey @davidjbradshaw,

on the iframe-resizer page, this link is invalid:
"The first (jquery.iframeResizer.min.js) "....

and the JS example is missing a plus sign (js concatenation) before the last line

' Width: ' + messageData.width (should be a plus sign here)
' Event type: ' + messageData.type);

just thought I'd report these :)

thanks for the plugin

Hi

I'm getting the following error in IE8 and IE9.

SCRIPT5022: Unexpected message received from: http://domain.com for iFrameResizer0. Message was: [iFrameSizer]iFrameResizer0:180:983:init

The iframe url and the script url are the same, and I've also set checkOrigin to false.

Here's how I'm initialising it:
$('#wrapper iframe').iFrameResize([{checkOrigin: false, heightCalculationMethod: "max"}]);

I'm on v2.4.6 - 2014-05-08.

Any suggestions as to what I might be doing wrong?

Many thanks
Jonny

I have an iFrame that is placed inside of a div container. The div container is set to position: fixed; with a margin-top: 60px; applied to it and pushed over left: 300px.

This 60px margin on the container div is causing the iFrame height to be short by the same amount. Any ideas?

I have three HTML files:

• inner.html (which has a iframeResizer.contentWindow.js)
• outer.html (which has both js files)
• superouter.html (which has a iframeResizer.js)

Each one contains the other. Both inner.html and superouter.html work as expected, but outer.html enters in an endless loop.

I see that changing msgId, it works. In a similar scenario I have:

• multijs_superouter.html with the regular iframeResizer.js
• multijs_outer.html with the regular iframeResizer.contentWindow.js but a modified iframeResizer.js where only msgId is changed
• multijs_inner.html with the modified iframeResizer.contentWindow.js

Here, the three files work as expected. But I'd like to avoid changing the JS files in every update, if possible. Is there anything I'm missing? Is there any other way to make this scenario work?

Thank you,

Hello,

I've been using your resizing code for a while now which works fantastic on modern browsers. I have been using it along side Raphael.js again no problems on newer browsers.

However on older browsers such as IE 8 <, Opera 12

I'm getting an error which is essentially breaking the Raphael.js. I'm not sure if anything can be done but I'll post up what I can and maybe you can shed some light on this subject.

I'm not familiar with window.requestAnimationFrame but was wondering if a conflict could occur with these libraries.

This is the error (This may or may not help):

Uncaught exception: RangeError: Maximum recursion depth exceededError thrown at line 10, column 30558 in (a, b) in https://localhost:44300/Scripts/Circles/raphael.js:
return b = M.call(b), "finite" == b ? !Yz : "array" == b ? a instanceof Array : "" == b && null === a || b == typeof a && null !== a || "object" == b && a === Object(a) || "array" == b && Array.isArray && Array.isArray(a) || W.call(a).slice(8, -1).toLowerCase() == b
called from line 21, column 6147 in (b, d) in https://localhost:44300/Scripts/Circles/raphael.js:
if (null == d && c.is(b, "string"))
called from line 14, column 35059 in () in https://localhost:44300/Scripts/Circles/raphael.js:
n.attr(o), function (a, c, d) { setTimeout(function () { b("raphael.anim.frame." + a, c, d) }) }(n.id, n, e.anim)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();

http://bower.io/#defining-a-package

Hi David,

You are life saver ! your cross domain iframe resizer works on all browsers, except for IE 11. ( I used your default settings and didn't change a thing), would you kindly shine lights on me to fix this IE 11 issue ? Thanks !

Steven

Hi David,

I've got an endless loop issue by using iframe-resizer (ver. 2.5.1) in combination with jQuery mobile (ver. 1.4.2) on the guest page. The guest page is a single file application that uses the multi-page feature of jQuery mobile (http://demos.jquerymobile.com/1.4.2/pages-multi-page/).

iframe-resizer works well without jQuery mobile. Activating it results in correct iframe resizing but looping endlessly. Here is an example of the iframe-resizer log:

"[iFrameSizer][pluginframe] Reset trigger event: mutationObserver: [object HTMLDivElement] attributes" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event lock on" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Sending message to host page (pluginframe:505:835:reset)" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][Host page] Received: [iFrameSizer]pluginframe:505:835:reset" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking height is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking width is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking connection is from: http://localhost" iframeResizer.min.js:8
"[iFrameSizer][Host page] Size reset requested by iFrame" iframeResizer.min.js:8
"[iFrameSizer][Host page] Get position: 0,0" iframeResizer.min.js:8
"[iFrameSizer][Host page] Requesting animation frame" iframeResizer.min.js:8
"[iFrameSizer][Host page] IFrame (pluginframe) height set to 505px" iframeResizer.min.js:8
"[iFrameSizer][Host page][reset] Sending msg to iframe (reset)" iframeResizer.min.js:8
"[iFrameSizer][Host page] Received: [iFrameSizer]pluginframe:506:835:resetPage" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking height is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking width is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking connection is from: http://localhost" iframeResizer.min.js:8
"[iFrameSizer][Host page] IFrame (pluginframe) height set to 506px" iframeResizer.min.js:8
"[iFrameSizer][Host page] Set position: 0,0" iframeResizer.min.js:8
"[iFrameSizer][pluginframe] Page size reset by host page" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event cancelled: resize" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Sending message to host page (pluginframe:506:835:resetPage)" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event cancelled: resize" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event lock off" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] --" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Reset trigger event: mutationObserver: [object HTMLDivElement] attributes" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event lock on" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Sending message to host page (pluginframe:505:835:reset)" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Page size reset by host page" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event cancelled: resize" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Sending message to host page (pluginframe:506:835:resetPage)" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][Host page] Received: [iFrameSizer]pluginframe:505:835:reset" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking height is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking width is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking connection is from: http://localhost" iframeResizer.min.js:8
"[iFrameSizer][Host page] Size reset requested by iFrame" iframeResizer.min.js:8
"[iFrameSizer][Host page] Get position: 0,0" iframeResizer.min.js:8
"[iFrameSizer][Host page] Requesting animation frame" iframeResizer.min.js:8
"[iFrameSizer][Host page] IFrame (pluginframe) height set to 505px" iframeResizer.min.js:8
"[iFrameSizer][Host page][reset] Sending msg to iframe (reset)" iframeResizer.min.js:8
"[iFrameSizer][Host page] Received: [iFrameSizer]pluginframe:506:835:resetPage" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking height is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking width is in range 0-Infinity" iframeResizer.min.js:8
"[iFrameSizer][Host page] Checking connection is from: http://localhost" iframeResizer.min.js:8
"[iFrameSizer][Host page] IFrame (pluginframe) height set to 506px" iframeResizer.min.js:8
"[iFrameSizer][Host page] Set position: 0,0" iframeResizer.min.js:8
"[iFrameSizer][pluginframe] Trigger event cancelled: resize" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event lock off" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] --" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Reset trigger event: mutationObserver: [object HTMLDivElement] attributes" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Trigger event lock on" iframeResizer.contentWindow.min.js:9
"[iFrameSizer][pluginframe] Sending message to host page (pluginframe:505:835:reset)" iframeResizer.contentWindow.min.js:9
...

the files do not contain a version nr, not in the code and not in the filename.
PS: the header of src/iFrameResizer.js also suggests another filename

Hi, I'm getting this error:
Uncaught Error: Unexpected message received from: http://www.simpledish.com for atfiframe. Message was: [iFrameSizer]atfiframe:250:300:init

I'm loading the iframes dynamically and appending the script into the iframe's body content to get the error.

You can check out this sample page for the error: http://www.simpledish.com/index_test.php

Hi David, does iframe-resizer work with .aspx pages. So far I have not been able to get iframeResizer.contentWindow script to call back! Many thanks P

When testing the example page (or a test page I made using the JQuery method), I get the following error message (both on IE11 in IE8 mode, and in a windows XP + ie8 virtual machine).
http://davidjbradshaw.com/iframe-resizer/example/ gives me the following error message:

SCRIPT5009: 'e' is undefined
File: iframeResizer.contentWindow.min.js, Line 9, Column: 123.

This error is keeping the iframe resize from working correctly in IE8.

Am I forgetting something important?

Thank you, good luck on this project.

David,

Thanks for your detailed explanation and examples of how this works. I have been working on dynamically applying height and width to a cross-domain iframe for about a week unsuccessfully until I read your article. I have everything up and running correctly on my staging site and host site ( using Firefox, Chrome, and IE 10 ), however I notice that this is not working for me on IE 9 and IE 8. The content loads in a smaller frame at the top of the page and does not expand or adjust dynamically.

How you experienced this issue before, or perhaps am I applying something incorrectly.

Thanks,
Mike K.

Nice plugin, which works fine except in IE 10 (maybe other versions too, I tried only 10). No issues with latest Firefox, Opera and Chrome.

I tried your project and believe I have most of it working. In your example, it dynamically resizes the iFrame and content when you adjust the window size manually. On my site, however, the iFrame does not resize and the callback values do not change when you resize the window. The iFrame is only adjusted when I change pages by clicking within the iFrame, causing a page refresh. You can check out my site at redhotrentalsaz.com. Thanks!

Hi,

Just noticed that I'm getting a request for /src/iframeResizer.contentWindow.map which is resulting in a 404.

Resizing is working correctly, sot it's not breaking functionally.

I can see this file in the repo but the instructions do not indicate that it's required on the server calling the iframe.

Is this file required? Are the other files in the src folder required as well?

Thanks in advance.