PDA

View Full Version : Resolved document.write problem in IE



kirsten
06-12-2010, 06:09 PM
Hello, nice to be back again!

I got a rather smaller problem in IE browser.

This is my page:
http://www.coolwebmaster.net/members/kirsten

Everything works fine, thanks to bluewalrus, but in IE browser there is an error shown at the bottom left.

I tried the .js file also without the <document.write > at the bottom of the code, and there were no errors in IE in the bottom bar.

I also tried using flash object, with no success.

Please, please, please help!
Thanks from my little tiny heart,
Kirsten

---------------------

Here my domo.js


var movieWidth = 247;
var movieHeight = 400;
var pro_movie = null;

var PositionX = 100;
var PositionY = 100;

function init()
{

var htmlBody = document.body;
var digi_div = document.createElement("div");
htmlBody.appendChild(digi_div);
digi_div.id = "pro_movie";
digi_div.innerHTML = div();


digi_div.style.position = "absolute";
digi_div.style.top = "-1000px";
digi_div.style.left = "-1000px";
digi_div.style.width = "247px";
digi_div.style.height = "360px";
digi_div.style.display = "none";
digi_div.style.zIndex = "10000";

var pro_movie = document.getElementById('pro_movie');

var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );


pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
pro_movie.style.display = "block";

}

function getWindowSize(toreturn)
{
var position = new Array();
if (self.innerHeight) // all except Explorer
{
position['x'] = self.innerWidth;
position['y'] = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
position['x'] = document.documentElement.clientWidth;
position['y'] = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
position['x'] = document.body.clientWidth;
position['y'] = document.body.clientHeight;
}
if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;

}

function getWindowScroll(toreturn)
{
var pro_movie = document.getElementById('pro_movie');
var position = new Array();
if (self.pageYOffset) // all except Explorer
{
position['x'] = self.pageXOffset;
position['y']= self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
position['x'] = document.documentElement.scrollLeft;
position['y'] = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
position['x'] = document.body.scrollLeft;
position['y'] = document.body.scrollTop;
}


if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;
}

function setResize()
{
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setResize()',10);
}
else
{
var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

function setScroll()
{
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setScroll()',10);
}
else
{

var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

{
document.write('<div id="pro_movie" align="right"; salign="bottom"; style="position: absolute; bottom:0px; right:0px; width:247; height:400px; z-index: 999; color: transparent; background-color:transparent">')

document.write('<iframe id="pro_movie" src="http://www.coolwebmaster.net/members/kirsten/demo.html" style="margin:0; padding:0; width:247px; height: 400px"; align="right" scrolling="no" frameborder="0" color: transparent; background-color:transparent; allowtransparency="true"></iframe>')

document.write('</div>')
//document.close();
}

window.onload = init;
window.onresize = setResize;
window.onscroll = setScroll;

traq
06-12-2010, 07:13 PM
FREAK ME OUT...! lol, my speakers were turned up pretty high. I wasn't expecting that. :)

anyway, I just tried it in IE6 & IE7 - it seemed to work fine, I didn't see any errors. What is the problem you're having, exactly?

kirsten
06-12-2010, 07:35 PM
Oh, sorry for your ears, lol

In IE (on the bottom bar left I get the yellow error sign and a text saying- error on the site blah blah...

traq
06-13-2010, 12:05 AM
Well, here it is on IE8, it looks just like it does on 6 and 7 to me:
http://www.custom-anything.com/sand/kristendemo.JPG
I don't see any errors. What does the error message say? It might be something specific to your browser settings.



Actually, on my Firefox error console I can see it:

div() is not defined : line 1

since its minified it's a little hard to spot in your code, but it's at column 3569

do you have a non-minified version? I'm bad enough at javascript as it is :)

jscheuer1
06-13-2010, 04:22 AM
Nice outfit. I think traq's way over thinking this. The error is from this highlighted line:


function init()
{

var htmlBody = document.body;
var digi_div = document.createElement("div");
htmlBody.appendChild(digi_div);
digi_div.id = "pro_movie";
digi_div.innerHTML = div();


digi_div.style.pos . . .

It doesn't do anything because there is no function div():


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.4; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Sun, 13 Jun 2010 04:19:57 UTC

Message: Object expected
Line: 16
Char: 5
Code: 0

Functions are also objects. The good news is, because it works without it, you can just get rid of that line:


function init()
{

var htmlBody = document.body;
var digi_div = document.createElement("div");
htmlBody.appendChild(digi_div);
digi_div.id = "pro_movie";


digi_div.style.pos . . .

kirsten
06-13-2010, 01:58 PM
@jscheuer1

Thanks, I got that line out and it works like a charm.

By the way, people with their sites made with frames (like with FrontPage), wont be able to see me on their website.

Is there a way to write a function in the .js file, so it would work also on sites made with frames?

I just tried the site of a friend, and she cant browse me:-(

Trs it: wirfuerstier-kiel.de

Thanks!

jscheuer1
06-13-2010, 04:38 PM
I discovered something here. You need the www component in the address, or else it doesn't work on any page. It does work with the framset, sort of. It reproduces the frameset, but since the script is in the head, before the frameset, it automatically creates a body element to hold the Flash before the browser gets a chance to parse the frameset. This is non-standard and most browsers will then ignore the frameset, even though it is there in the PHP or script generated source of demo.php.

It also works with a page from the frameset, like:


http://www.wirfuerstier-kiel.de/startseite.htm

You can test with javascript if a page has a frameset:


if(document.getElementsByTagName('frameset').length){
deal with the frameset here.
}

But you cannot do that in javascript until after the page has loaded (onload or listened/attached to the load event), too late to document.write to the page.

If you are using javascript to generate the entire code for the page, not just your added feature, you could analyze that string before it is written for the frameset tag. But It looks more like you are using PHP.

If you are using PHP to copy the page and write your version of it, you could check the HTML code for the frameset tag on the fly while creating your copy.

However you identify the presence of a frameset, once there is one, there could be several nested ones and you need to find the largest/rightest/lowest/visible frame. So instead of just recreating one page, you need to recreate the frameset page and this lrlv frame's page. The others can remain as they are and be pulled from the external domain by your frameset clone page. Now this lrlv frame's page might also be a frameset and on and on. But say it's just a regular page, you put your demo.js script on your copy of it and substitute your copy's address for the lrlv frame's src attribute in your copy of the frameset.

If it were me, I'd first try simply detecting the frameset and telling/alerting them somehow to use a non-frameset page from their domain. I say this because of the virtually infinite amount of possibilities a frameset represents and the difficulty of drilling down through it to find the actual page that would be best to put your feature on. Even with a simple two frame frameset with ordinary pages in each frame, like on the example you give, it's complicated.

How are you recreating the external page? Is it as I have guessed, via PHP?

kirsten
06-13-2010, 06:02 PM
Hi John,
thanks for great answer, Im affraid too complicated for me to understand entirely.

Yes, the whole thing is triggered by the php file.

Where do you seggest should I put:

if(document.getElementsByTagName('frameset').length){
alert('ERROR!', 'The website you entered is made with an older programm!');
}

Kirsten

jscheuer1
06-13-2010, 09:04 PM
Well it is complicated. I imagine you've edited the script a fair amount since you got it. I think that originally it was supposed to add the iframe onload. That's not reliable because many of the pages you will be cloning will have their own onload events that overwrite that. I'm guessing that may be why you added the document.write bit. That is if you did and if it happened like that. Others before you may have made changes. There are other issues, but I don't want to digress here.

But we cannot tell from javascript if it's a frameset until after the page loads and that's too late to do document.write. That's why I suggested editing the PHP script to tell that. The PHP script is still your best bet. Or, you can leave it as is. Like you say, at least they get to see you.

You could use this modified version of the script where I restore the onload, but do it in a way that cannot be overwritten:


(function(){
var movieWidth = 247;
var movieHeight = 400;
var pro_movie = null;

var PositionX = 100;
var PositionY = 100;

function init() {
if(document.getElementsByTagName('frameset').length){
//deal with the frameset here.
alert('ERROR!, The website you entered is made with frameset!\n' +
'You can still see me, but without your website');
location.href = 'http://www.coolwebmaster.net/members/kirsten/demo.html';
return;
}
var htmlBody = document.body;
var digi_div = document.createElement("div");
htmlBody.appendChild(digi_div);
digi_div.id = "pro_movie";
digi_div.innerHTML = '<iframe id="pro_movie" src="http://www.coolwebmaster.net/members/kirsten/demo.html" style="margin:0; padding:0; width:247px; height: 400px"; align="right" scrolling="no" frameborder="0" color: transparent; background-color:transparent; allowtransparency="true"></iframe>';
digi_div.style.position = "absolute";
digi_div.style.top = "-1000px";
digi_div.style.left = "-1000px";
digi_div.style.width = "247px";
digi_div.style.height = "360px";
digi_div.style.display = "none";
digi_div.style.zIndex = "10000";
var pro_movie = document.getElementById('pro_movie');
var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );
var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );
pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
pro_movie.style.display = "block";
}

function getWindowSize(toreturn){
var position = new Array();
if (self.innerHeight) // all except Explorer
{
position['x'] = self.innerWidth;
position['y'] = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
position['x'] = document.documentElement.clientWidth;
position['y'] = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
position['x'] = document.body.clientWidth;
position['y'] = document.body.clientHeight;
}
if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;
}

function getWindowScroll(toreturn){
var pro_movie = document.getElementById('pro_movie');
var position = new Array();
if (self.pageYOffset) // all except Explorer
{
position['x'] = self.pageXOffset;
position['y']= self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
position['x'] = document.documentElement.scrollLeft;
position['y'] = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
position['x'] = document.body.scrollLeft;
position['y'] = document.body.scrollTop;
}
if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;
}

function setResize(){
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setResize()',10);
}
else
{
var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

function setScroll(){
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setScroll()',10);
}
else
{

var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})();

addEvent(window, 'load', init);
addEvent(window, 'resize', setResize);
addEvent(window, 'scroll', setScroll);
})();

If the site entered has a frameset, they will get the error message, but when you show up, it will no longer be in the lower right corner, rather near the top left. Some javascript on demo.html to detect if it is the top page could position the feature though. Or you could make a separate page with an iframe positioned properly and showing demo.html, and use that page's address instead of demo.html's in the location.href line in the above script.

This also makes me realize that none of this, as currently setup, is possible without javascript. So, if javascript is disabled, you should detect that and not offer this feature. Or at least have something next to input for the URL that says, "Javascript Required".

However, it should be possible to do all of this with PHP alone.

jscheuer1
06-13-2010, 11:51 PM
I figured out a way to combine the two methods. With frameset, this will get you coming in from the bottom right after an alert and wiping out the frameset. For normal pages it will work as before, except I've used the onload method I developed in the last version to get it to play nice with other onload events and variables of the cloned page + it will now scroll properly with the page (I think the version you had may of short circuited that with some browsers):


(function(){
var movieWidth = 247;
var movieHeight = 400;
var pro_movie = null;
var fset;
var PositionX = 100;
var PositionY = 100;

function init() {
if(document.getElementsByTagName('frameset').length){
//deal with the frameset here.
alert('BUMMER!, The website you entered is made with frameset!\n' +
'You can still see me, just without your website.');
document.write('<body><div id="pro_movie" align="right"; salign="bottom"; style="position: absolute; bottom:0px; right:0px; width:247; height:400px; z-index: 999; color: transparent; background-color:transparent">\n' +
'<iframe id="pro_movie" src="http://www.coolwebmaster.net/members/kirsten/demo.html" style="margin:0; padding:0; width:247px; height: 400px"; align="right" scrolling="no" frameborder="0" color: transparent; background-color:transparent; allowtransparency="true"></iframe></div>');
document.close();
return;
}
var htmlBody = document.body;
var digi_div = document.createElement("div");
htmlBody.appendChild(digi_div);
digi_div.id = "pro_movie";
digi_div.innerHTML = '<iframe id="pro_movie" src="http://www.coolwebmaster.net/members/kirsten/demo.html" style="margin:0; padding:0; width:247px; height: 400px"; align="right" scrolling="no" frameborder="0" color: transparent; background-color:transparent; allowtransparency="true"></iframe>';
digi_div.style.position = "absolute";
digi_div.style.top = "-1000px";
digi_div.style.left = "-1000px";
digi_div.style.width = "247px";
digi_div.style.height = "360px";
digi_div.style.display = "none";
digi_div.style.zIndex = "10000";
var pro_movie = document.getElementById('pro_movie');
var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );
var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );
pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
pro_movie.style.display = "block";
}

function getWindowSize(toreturn){
var position = new Array();
if (self.innerHeight) // all except Explorer
{
position['x'] = self.innerWidth;
position['y'] = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
position['x'] = document.documentElement.clientWidth;
position['y'] = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
position['x'] = document.body.clientWidth;
position['y'] = document.body.clientHeight;
}
if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;
}

function getWindowScroll(toreturn){
var pro_movie = document.getElementById('pro_movie');
var position = new Array();
if (self.pageYOffset) // all except Explorer
{
position['x'] = self.pageXOffset;
position['y']= self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
position['x'] = document.documentElement.scrollLeft;
position['y'] = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
position['x'] = document.body.scrollLeft;
position['y'] = document.body.scrollTop;
}
if(typeof toreturn == "string")
return parseInt(position[toreturn]);
else
return position;
}

function setResize(){
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setResize()',10);
}
else
{
var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

function setScroll(){
pro_movie = document.getElementById('pro_movie');
if (pro_movie == null)
{
window.setTimeout('setScroll()',10);
}
else
{

var moviePositionY = parseInt(getWindowScroll('y') + parseInt( ( (getWindowSize('y'))/100 ) * PositionY ) ) - (movieHeight/(100/PositionY) );

var moviePositionX = parseInt(getWindowScroll('x') + parseInt( ( (getWindowSize('x')-20)/100 ) * PositionX ) ) - (movieWidth/(100/PositionX) );

pro_movie.style.top = moviePositionY+'px';
pro_movie.style.left = moviePositionX+'px';
}
}

var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})();

addEvent(window, 'load', init);
addEvent(window, 'resize', setResize);
addEvent(window, 'scroll', setScroll);
})();

I still think this could all be done with PHP though, and that would be better. Using javascript, you should at least have a warning that javascript is required as mentioned in my last post. That warning could go in a noscript tag though, to avoid bothering those with javascript enabled.

kirsten
06-14-2010, 01:59 PM
@ traq

Thanks for the image!

kirsten
06-14-2010, 02:06 PM
@ jscheuer1

Billion of thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
It works fantastic! Please have a look: http://www.coolwebmaster.net/members/kirsten

Im working on my homepage index right now, thats why it looks so speary.

How would you put that code:
if(document.getElementsByTagName('frameset').length){
...............
...............
}
into the .php file actualy? Just because you say its better - and I believe you!

Kirsten

jscheuer1
06-14-2010, 03:45 PM
Works out well. Try it with javascript disabled though.

Anyways, you can't put javascript on PHP, well you can. But then you are just running javascript on a PHP page. There is limited communication between the two, and to get PHP to make use of new information provided to it via javascript is either very complicated or requires a page change or refresh. And it still requires javascript. I think we can get rid of javascript entirely, except for detecting and dealing with a deficiency of IE 6.

So I didn't mean to use the javascript detection of frameset on the PHP page. I know the cloning of the page in PHP is pretty simple. I forget the exact code, but could look it up. Your PHP script does more than just clone the page though. It inserts the script and base tags at the proper positions. To do that it probably has to in some fashion parse (possibly using str_replace or one of the other replace functions) the HTML code it has fetched from the remote server to see where to put the added code. While it is doing that, or in a separate operation, it can do a case insensitive search for '<frameset' in the code. This would have a disadvantage over javascript because if the page were just talking about framesets, and didn't have one on it, and were poorly written, you might get a false positive. But that would be very rare.

There's more to making it all PHP than just this. If you don't want to go all the way through, there's not much point in making this one change.

Once you detect if it is a frameset or not, you can, if it isn't a frameset, clone the page as usual, but instead of inserting a script and having javascript write out the code for your iframe, have PHP do it.

Instead of using position absolute, which requires javascript detection to make sure the page is and remains in the correct orientation, use position fixed. This will work for all modern browsers except IE 6. A fairly simple script can detect that and correct for it. But for all other browsers, javascript could be disabled and it would still work just fine.

If it is a frameset, don't clone the page. Instead have PHP write out your regrets ("Sorry . . . but you can still see me."), no alert required, and have PHP also write out your iframe.

jscheuer1
06-24-2010, 01:52 AM
You're welcome.