Setting content of iframe using javascript fails in firefox - javascript

I'm trying to set the content of a iframe using javascript.
I've the html string. And I'm writing:-
var iframe = $('iframe')[0],
content = '<div>test</div>';
$(iframe).contents().find('html').html(content);
It works fine in google chrome, but in firefox is shows the content for a moment and the disappears.
Please help me to fix it.

I faced the same problem. I saw the load function of iframe fires in firefox but not in chrome. So firefox reload the iframe again on load event.
So with your existing code try this:-
$(iframe).load(function(e){
$(iframe).contents().find('html').html(content);
})

Related

iframe does not show correct only on firefox?

Below is my code....
var iframe = document.getElementById('pltc');
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write("<input type='checkbox'/>");
iframe.contentWindow.document.close();
On Chrome browser, I will get a checkbox on screen.
But in firefox, i will get plain html text on screen.
<input type='checkbox'/>
Any reason why this happened?
There are different compilation in different browsers when you called open.
In chrome, it helps you to inject html code into the iframe before rendering.
It is similar to js - document.write , which is exactly you want in the code.
In firefox, it helps you to inject html code into iframe after rendering, probably js - body.innerHTML
I suggest removing the open command and see if the content work in your way.
To be honest, there should not be such different, are you using SSL or https// in your web?

Dynamically resizing Iframe to work with Chrome

i'm looking by a week for a code to dynamically resizing an IFrame (by its content) to work with Google Chrome.
I tried every code I found, failing miserably.
Can someone help me?
This works for all Chrome, I.E. and FF.
(I didn't test it on other browsers)
$(function ()
{
$('iframe').height($('iframe').contents().height());
});

jQuery Colorbox IE7 issue with inline ajax loaded content

I'm using the jQuery colorbox plugin and it works great in Chrome, Firefox, IE 10, 9 and 8, but in IE7 the content of the colorbox is blank. The plugin is set to use inline content, and I have divs set up on my page whose content is loaded dynamically via AJAX. This works perfectly in all other browsers, but IE7 shows the colorbox with empty content.
Has anyone else run into an issue like this? Any help would be greatly appreciated!!
UPDATE:
The problem is definitely related to the content in the inline divs being loaded via AJAX. When I hard code the content, the colorbox popup shows the content correctly. However when I load the content in the div using ajax, colorbox shows an empty popup. I've tested that the ajax call is working correctly using a simple var test = $('#test').html(); alert(test); and the alert showed the ajax updated content.
As IE7 support is being dropped for colorbox, this issue will not be corrected.

location.hash inside iframe not working on Firefox

I'm trying to display an HTML5 slideshow inside an iframe (based on Google's html5slides). The current slide number is set in the URL hash to be able to directly jump to it.
But it doesn't work in Firefox. The tricky part is that I populate the iframe's content using javascript, so my iframe doesn't have a src attribute. When I load my slideshow's code in the iframe, it is correctly displayed on Chrome, Opera, Safari, even IE9. But on Firefox it loads for a split second then loads my parent page inside the iframe.
I suspect that setting the hash inside the iframe doesn't work in firefox because I have no src attribute (I tested with an empty src attribute and it's the same)
So is there another way to set the url's hash of an iframe in javascript that would work with firefox?
You can see the bug in firefox if you paste this page content's in jsbin.com with real-time preview: http://html5slides.googlecode.com/svn/trunk/template/index.html
In firefox jsbin will load itself inside the preview iframe.

Page not loading in IE

I just made some CSS changes to a page and all works perfect in firefox safari, chrome but when i view it in IE there is nothing. I mean just a blank page
http://posnation.com/pos_support/aldelo_training_dvd
Also this is a miva site
try validating your html. You also don't have an end title tag.
Close title tag.
It looks like the tag in the page head isn't closed properly (line 4). FF and Chrome often fix this sort of error for you as they render the page, IE isn't on this occasion.

Categories

Resources