PDA

View Full Version : iframe problem in Firefox only....

pavinder
02-18-2006, 08:56 AM
Hi, following a previous thread...

I'm using iframes to display text files within a page.
These text files include text and html tags.

I've encoded nearly everything with UTF-8 as the site is multilingual.

The iframe correctly seems to be displaying the text as an html page in Safari and IE with Japanese text looking good (if of course the user chooses UTF-8 encoding in view options).

But in Firefox the iframe contents are displaying with all the html tags included.

Some help on this would be really appreciated.

Thanks in advance.

Code is at:

http://www.endlessness.org/encoding/encodingvisible.php

(By the way, the reason I'm using iframes is that this code will exist within a single table cell in my finished page, so I need to keep it "independent" so it can change content while the rest of the page remains static. And also because the content is floating transparently over an image background which will change with each new page load)

Thanks in advance....
zac_newt
02-18-2006, 01:50 PM
I had a similar requirement with iframes, and math content which required UTF-8. The solution was innerHTML. Hope the following works for you.

In your encodingvisible.php page, put this script:

<script type="text/javascript" >
function insertIt() {
var _y = document.getElementById('framediv');
var _x = window.frames[0].document.body.innerHTML;
_y.innerHTML = _x;
}
</script>

Then where you want the action in your encodingvisible.php page, put:

<div id="framediv">
<iframe onload="insertIt();" src="A5-3.htm" frameborder="no" width="555px" scrolling="no">
</div>


Then in your utf-j.txt or whatever page that you are pulling in, replace the <body> with:

<body onload="if( window.parent && parent != window ) { parent.loadFrame(document.body.innerHTML,1);}">

You can see an (early, draft, with some problems) example of it working at: http://www.intmath.com/cg2/iframeInnerHTML.htm

You'll notice the imported file also picks up the CSS of the parent page - this was important to me.

Here's a current page with the fully working innerHTML (click on "Answer" to import the answer file): http://www.intmath.com/Kinemats/3_exers.php

Good luck with it.

Credits: Several people helped me with this - not sure which piece of code came from who, now.
pavinder
02-19-2006, 06:26 AM
Thanks very much for the suggestion, zac.

It seems to have solved the issue with Firefox display, but at the same time has created new problems:

1. In Firefox and Safari, the text files do load seamlessly, but the links from the text files now load the linked files in the entire window, not just the frame element. This obviously can be fixed, but I can't work out the correct "window.document.frames.innerHTML.something.something" reference to use. Advice on this would be appreciated.

2. In IE the links from the text file work fine but the CSS on the text file doesn't get imported so the text appears in a white box rather than floating over the background image.

3. In Firefox my browser appears to keep trying to complete loading the page but never finishes. Everything is visible, but the cursor still is spinning around and the progress meter shows more left to load.

I thought it might be due to the new <body> tag as your suggestion, but playing with various combinations of tags didn't get me any closer to success.
(previously the text files had no <html>, <head> or <body> tags as the client will be changing these text files and I'd rather not risk them being able to delete or change these tags)

The new testing version is at:
http://www.endlessness.org/encoding/encodinginner.php

Any further refinement appreciated! Thanks....
zac_newt
02-20-2006, 02:26 PM
Well, I tried...

Your application is quite different to mine in that you want the iframe to load when the page loads (mine was to load when the link is clicked.)

Some of what I gave you in the last post was not right. My application assumes the file to be loaded is a fully formed HTML file, hence the body tag. It should have been
<body onload="if( window.parent && parent != window ) { parent.loadFrame(document.body.innerHTML,0);}">

The js in the parent page should contain the loadFrame function and be something like

var i=0;
function writeDivs() {

if( document.childNodes && document.createElement ) {
document.write(
'<div class="shadow" style="visibility:hidden;">'+
'<div style="visibility:hidden;">'+
'<iframe src="" height="0" width="0" scroll="1" name="loader'+i+'">'+
'<\/iframe><\/div>'+
'<div id="output'+i+'" class="dropDownContentExt">Loading...<\/div><\/div>'
);
}
i++;
}
function loadFrame(newData,oNum) {
if(document.getElementById('output'+oNum).parentNode.style.visibility == 'visible'){
document.getElementById('output'+oNum).parentNode.style.display = 'none';
document.getElementById('output'+oNum).parentNode.style.visibility = 'hidden';
} else {
document.getElementById('output'+oNum).innerHTML = newData;
document.getElementById('output'+oNum).parentNode.style.visibility = 'visible';
document.getElementById('output'+oNum).parentNode.style.display = 'block';
}
}

Anyway, the following is close to the way mine works - it does not have the endless Firefox loading problem, but then it doesn't actually do what you want, either.

http://www.intmath.com/cg2/endless.html

Maybe you can get something from it. It's beyond me, I'm afraid.

When I was at your stage, I got a lot of help from Hemebond on this forum and also Mark Winton-Jones was great: http://www.howtocreate.co.uk/emails/MurrayBourne.html

Good luck...
pavinder
02-20-2006, 03:03 PM
Zac,

I'll give that a serious look tomorrow. I hop I can glean some solution from it. It's all being done this way because the client has to change the site content and I want it as idiotproof as possible. Of course that makes my job more tricky, and I'm feeling like an idiot! Funny, that.....

Thanks so much for your help.
zac_newt
02-21-2006, 12:53 AM
Why not create an interface so your client can edit the content online? Then they don't need to mess with the actual txt (or html) files and upload. More idiot-proof and gives you some more flexibility.