Iframe with autoheight - javascript

i need to autoheight an iframe with a cross domain src, i tried with javascript, but I get an "Access Denied" when I try to get the height of iframe contentWindow. anyone knows any method?

ItzWarty is right: the parent page cannot communicate with the child document, even to find out its height. Back in 2008, Michael Mahemoff posted a detailed overview of Cross-Domain Communication with IFrames that may provide you with some guidance.
Hope is on the way, however - HTML5 includes an improvement to this situation called "Cross-document messaging" that is supported in Firefox 3, Safari 4, Chrome 2, Opera 9.2 and even IE... 8. If your users are using only those supported browsers, you could use it.
Perhaps you could set the "scrolling" attribute on the IFRAME element to "auto" by default and test for window.postMessage - if it succeeds, set "scrolling" to "no" and use a function to size the IFRAME accordingly.
I recently dealt with a similar issue (parent page from domain.tld framing a page on blog.domain.tld) but I was able to use "the old document.domain hack" that Mahemoff described to get by, although it's not supported in Opera.
Good luck.

If you created a proxy on your server that fetched the content, JavaScript wouldn't have this restriction.

The domain issue is only one problem you face - IE8 is the other. Even if you can access the iframe, IE8 cannot accurately retrieve the body.clientHeight info. Firefox works tho...

Related

SVG inside an HTML-Object

I have built a website with 2 SVG-files, each one inside an object tag.
Chrome returns 'null' when I try to access the SVG-Root element with .getSVGDocument() and also with .contentDocument (!). In Opera I have the same problem. In Firefox and Safari it works.
I heard that Chrome denies access to external files by default, for security reasons. Hence, the only way to solve the problem is to put the SVG-Code inline HTML !? Or is there another option?
Thanks for your hints!
Kind regards,
Codebastler

Youtube iFrame API events not firing on Firefox 14

I'm currently working on embedding a youtube video using the iframe API, what is annoying me is that the events are not firing only on Firefox (I have just tried firefox 14), they work on every other browser (obviously not using browsers from hell like IE7).
The samples from their documentation don't work either, if you grab the piece of code they have under the getting started section of this page and here is the jsfiddle version for your quick view.
The player is displayed on the page, but as I mentioned the events are not working, neither I can use any function from the api, they all throw undefined error.
I appreciate any help.
Ok I found the problem,
It's because of the Firefox Extension HTTPS-Everywhere, which is switching the requests to use https, and since my page is requested using http, that was causing a conflict with the youtube iframe requests.
I believe I should put a warning on my site about using that plugin. Thanks for your help everyone.
I had once a problem with plying events to the iframe and it also apeared only in Firefox.
The answer was to specify the id and name of the iframe to the same value.
Try it - it might work for you as well.

JavaScript window.open function is displaying toolbar and menubar when instructed not to in IE7

I am currently trying to open another IE window using the code below, but the toolbar and menubar is still showing under IE7, it seems to work under IE8 though. Why is it doing this?
mywindow = window.open("dataviewer.aspx?id=" + id , "", "toolbar=no,location=no,directories=no,menubar=no");
I seem to recall having to add a website to my "trusted sites" list in IE7 to get the toolbars hidden. Of course that isn't going to help if you can't control that for your visitors, but I think it was something locked down as of IE7 -- even though MSDN doesn't state that. It might be an advanced setting, or maybe it was related to some 3rd party add-on or anti-virus I had. I just know I had a website that launched a small window that was meant to be a "floating toolbar" and it worked great in IE6, but once I upgraded to IE7 the width and height worked, but it had toolbars. I added that site to my trusted sites list, and it started working again.
If that is the case for you, I'd check the advanced security features and see what is different between normal and trusted sites, and maybe fine the one setting that controls this.
It works in IE7-mode in IE9. I don't have a machine with real IE7 installed.
The directories features is no longer supported. Just a guess, but that might be your problem.
One thing to try is to specify only "toolbar=no". Once you've specified to disable one of the features, the rest of them default to no. If you wanted no toolbars, but you did want an address bar, you'd have to explicitly say "location=yes" to get them back on. So, setting just one feature to no is good enough to turn the rest of them off as well.
Try this: http://jsfiddle.net/VD8sk/
mywindow = open("dataviewer.aspx?id=" + id , "", "toolbar=no");
Edit: Maybe also try "toolbar=no,menubar=no" without the other features specified.

distinguishing between pages using JavaScript

I'm curious as to how I'd get JavaScript to distinguish between two near identical pages which (as far as I can tell) have the same div's. An example of a page like this would be Google Home Page vs. Google Search Results. Is there anyway I can correctly identify which is which?
In that specific example, window.title will distinguish them. window.title isn't supported by Chrome, but document.title is. It works in Chrome, Firefox, and Opera on both Linux and Windows; Safari on Windows; IE6, IE7, and IE8 on Windows; and probably others as well.
More generally, window.location gives you the URL of the page, which is good for telling what page you're on; more on MDC. It's supported on every major browser I've ever seen, including the list above.
Since HTML5, you can edit the browser history. For example, you can change the current URL with window.history.pushState():
// pushState(state object, title, URL)
window.history.pushState({foo: "bar"}, "page 2", "bar.html");
This makes the user remain on exactly the same page, but changes the URL. This is happening on the current version of Google's homepage too, so the page is still the same.
You can retrieve the URL with window.location.

prevent iframe content reload on hide in firefox

In my webapplication I hide an iframe using jquery hide() function.
Surprisingly firefox reload the content of iframe when the iframe is hidden.
Is this a known problem? Is there a workaround?
I also tried to hide the iframe setting css style display to 'none'. Same result.
The script work as expected in opera.
I'm using firefox 3.5.1
Some say the solution might be in providing a different
id or name attribute for each IFRAME =
but it did not work in my Case (FF 3.6+)
Another possible solution is to make sure the iframe's content
is not taken from the browsers cache.
this can be done by concatenating a randomizing string to the the iframe's source URL, making sure the content will never come from the cache.
all in all, its a bug that should be fixed by the Mozilla team!..
Don't know about that bug, but one possible solution is to set height and width to 0px instead, maybe?

Categories

Resources