document.write problem in IE

[kirsten]

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]

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]

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]

Well, here it is on IE8, it looks just like it does on 6 and 7 to me:

I don't see any errors. What does the error message say? It might be something specific to your browser settings.

Edit:

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]

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]

@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]

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]

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]

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]

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.