locked
Local html with javascript won´t run RRS feed

  • Question

  • Hi,

    I´ve made some html pages with some javscript in them. The script is sometimes in a seperate js file.

    Now, since upgrading to IE 9, this doesn´t work.

    The pages are run locally or on a usb-stick. Nothing works.

    Thanks for help.

    Fabean

    Friday, July 18, 2014 6:46 AM

Answers

  • ----------( Fabean.html )----------
    
    <!DOCTYPE html>
    <html>
    <head>
    	<title> local js test </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    	<script src=Fabean.js type=text/javascript></script>
    </head>
    <body id=spics>
    	<h1>Fabean's edu_1 photos</h1>
    	<br>
    </body>
    </html>
    
    
    ----------( Fabean.js )----------
    
    onload = function() {
    
    	loadpics( 0, null );
    
    	function loadpics( pnum, nImg ) {
    
    		if (pnum) document.getElementById("spics").appendChild( nImg );
    
    		pnum++;
    		var pname = "images/" + window.location.pathname.slice(window.location.pathname.indexOf("edu_1"), window.location.pathname.indexOf(".")) + "_" + pnum + ".png";
    
    		nImg = document.createElement('img');
    		nImg.className = "smallpics";
    		nImg.style.border = (pnum==1) ? "4px solid rgb(106,26,65)" : "rgb(120,152,35) 4px solid";
    
    		nImg.onload = function(){ loadpics( pnum, nImg ) };
    
    		nImg.src = pname;
    		nImg.id = pname;
    	  //	nImg.onmouseover = function(){this.style.cursor='pointer';imhover(this);}
    	  //	nImg.onmouseout = function(){hoverout(this);}
    	  //	nImg.onclick = function(){clearInterval(picchange);document.getElementById("p1").src=u;this.style.border='4px solid black';greenout(this);}
    	}
    }

     

    I restructured your code so each successful img onload starts loading the next img in the sequence.  The onerror handler was no longer needed, because this way, it just stops fetching on its own.

     

    In addition to working with IE9+, it still works with XP+IE8.  I checked.  I also tested your original code with XP+IE8, and it worked fine there.  But like you said, it hangs on newer IE.  That's really interesting, Fabean.  Thanks for telling about it.

    • Marked as answer by Fabean Wednesday, July 23, 2014 9:56 AM
    Wednesday, July 23, 2014 6:30 AM

All replies

  • Internet Options>Advanced tab, check "Enable active content to run in files on my computer" and "Enable active content from CD's to run on my computer"

    Reboot your computer for the full changes to take affect.

    or

    use your localhost.

    Regards.


    Rob^_^


    Saturday, July 19, 2014 6:29 AM
  • ----------( localjs.html )---------
    
    <!DOCTYPE html>
    <html>
    <head>
    	<title> local js test </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    	<script src=local.js type=text/javascript></script>
    </head>
    <body>
    	<p>A local javascript can turn this <b id=text style=color:blue>red</b>.</p>
    </body>
    </html>
    
    ----------( local.js )----------
    
    onload=function(){ text.style.color="red" }

     

    Hi Fabean.  I see you simply upgraded to IE9, but don't mention changing any security or advanced-internet options.  I cannot imagine any reason to think you did that.  But since you seem to explain your code was working fine before IE9 upgrade, maybe your code itself works with previous IE versions, but, just not IE9 and upward.

    I said "seem to explain", because IECustomizer MVP's reply suggests maybe your code didn't work before upgrading either.  You didn't say explicitly that it did ever work.  So I'll ask on his behalf.  Are you asking us a trick question?  Did your code never work before you upgraded to IE9?

    I tried these very simplest pair of html+js files shown above, for a test, from my desktop and also usb thumbdrive.  They work ok locally for me.  If you want to test, you can copy+paste them separately into Notepad and save to your desktop or thumbdrive, then double-click the html to invoke.  Can you tell us, does it work for you?

    Monday, July 21, 2014 3:21 AM
  •  

    Internet Options>Advanced tab, check "Enable active content to run in files on my computer"


    Rob^_^

     

    IECustomizer, can you explain better what that option you advised to set (and Proposed as Answer) does?

     

    I do not have it set.  Yet the local html+js on my thumbdrive (H:) ran the script just fine anyway.  Of course, it is such a very simple script.  You probably tested a much more complicated one, and that is why you needed to have that setting.  Will you tell us the details please.

     

    http://bknndq.bl3301.livefilestore.com/y2p_xuZfwF7isgdxbyBZ9i-8uwrQ-uFL_ZwsVnKglx57hPFBHlCykhfUpn6iAWXHP1Zq222TIm215HbP2CrcIPe03iKy8ch1rBjXym7Eg37nsM/IE9-AllowActiveContent-not-set.png

    Monday, July 21, 2014 4:50 AM
  • Hi thumbdown,

    and thanks for replying.

    Yes, my site worked fine before the upgrade. I forgot to mention (not sure it matters) that the scripts are in a .js file.

    It appears that the scripts that are integrated in the html pages works.

    Fabean 

    Monday, July 21, 2014 7:17 PM
  • Hi Rob,

    and thanks for answering. I tried those settings, but it didn´t work I´m afraid.

    The js scripts that don´t work appears to be the ones located in a .js file.

    Fabean

    Monday, July 21, 2014 7:25 PM
  • I'm relieved to learn that your scripts worked fine with your earlier IE installation.  Someone made me concerned about that.    ; )

     

    So.  Did you try making and testing the localjs.html and local.js files in the codebox above?  That would be the easy starting point, to decide where to look next for the problem.

    Monday, July 21, 2014 7:40 PM
  • Hi Rob,

    and thanks for answering. I tried those settings, but it didn´t work I´m afraid.

    The js scripts that don´t work appears to be the ones located in a .js file.

    Fabean

    Hi fabean,

    to avoid confusion please post your html and js files

    or

    F12>Debug tab, then refresh you page to show suppressed error messages.

    Post back with your code or error messages.


    Rob^_^

    Tuesday, July 22, 2014 1:49 AM
  • Hi Rob,

    and thanks for answering. I tried those settings, but it didn´t work I´m afraid.

    The js scripts that don´t work appears to be the ones located in a .js file.

    Fabean

    Hi fabean,

    to avoid confusion please post your html and js files

    or

    F12>Debug tab, then refresh you page to show suppressed error messages.

    Post back with your code or error messages.


    Rob^_^



    Rob^_^

    Tuesday, July 22, 2014 1:50 AM
  • Hi Rob,

    and thanks for answering. I tried those settings, but it didn´t work I´m afraid.

    The js scripts that don´t work appears to be the ones located in a .js file.

    Fabean

    Hi fabean,

    to avoid confusion please post your html and js files

    or

    F12>Debug tab, then refresh you page to show suppressed error messages.

    Post back with your code or error messages.


    Rob^_^



    Rob^_^

    Tuesday, July 22, 2014 1:50 AM
  • Hi Rob,

    and thanks for answering. I tried those settings, but it didn´t work I´m afraid.

    The js scripts that don´t work appears to be the ones located in a .js file.

    Fabean

    Hi fabean,

    to avoid confusion please post your html and js files

    or

    F12>Debug tab, then refresh you page to show suppressed error messages.

    Post back with your code or error messages.


    Rob^_^



    Rob^_^

    Tuesday, July 22, 2014 1:50 AM
  • Hi again,

    Thanks for the tip. I tried the codebox and debugged it. After figuring out that the debugger shows the error on the wrong line I found an error in the .js file (apparently there is not suppost to be a ";" before the "else" in explorer 9...

    However, this took care of the .js file loading problem. Now there´s another problem:

    I use this code to check for images that are named in a certain way (with an incremental suffix). when there are no more images, the script is supposed to cause an error and exit. In IE9, it just keeps on going. What do I need to change?

    *****

    <script type="text/javascript">
    var pcheck = 1;
    loadpics();
    function loadpics(){
     
     var pnum = 1;
     var pname;
     while (pcheck == 1) {
      pname = "images/" + window.location.pathname.slice(window.location.pathname.indexOf("edu_1"), window.location.pathname.indexOf(".")) + "_" + pnum + ".png";
        
      imageExists(pname);
      if (pnum == 1){
       document.getElementById(pname).style.border="4px solid rgb(106,26,65)";
      }
      pnum = pnum + 1;
      }
    }

    function imageExists(u){
      var nImg = document.createElement('img');
     nImg.className = "smallpics";
     nImg.style.border = "rgb(120,152,35) 4px solid";
     nImg.onload = function(){
     pcheck = 1;
     }
     nImg.onerror = function() {
     pcheck = 0;
     }
     nImg.src = u;
     nImg.id = u;
     nImg.onmouseover = function(){this.style.cursor='pointer';imhover(this);}
     nImg.onmouseout = function(){hoverout(this);}
     nImg.onclick = function(){clearInterval(picchange);document.getElementById("p1").src=u;this.style.border='4px solid black';greenout(this);}
     if(pcheck == 1){
      document.getElementById("spics").appendChild(nImg);
     }
    }
    </script>

    Tuesday, July 22, 2014 3:59 PM
  • If I follow correctly.  This script begins by setting pcheck=1, then executes loadpics() which spins in while-loop generating id=image/edu_1xxxx_n.png values, calls imageExists[id] to create that <img src=id /> and set up its load and error handlers, and stays in while-loop inside loadpics() making more of same id+imgs until error handler clears pcheck=0.

    If that's the flow, then load and error handlers never get chance to dispatch, is my belief.  Not until loadpics() is exited.  So pcheck=0 never can get cleared.  (Even if it did, there could be many many false <img>s created in the meantime).  Which IE did this work with before?  Possibly I can try an experiment to compare.  Maybe I am wrong.

     

    btw.  Not important here.  But for html4, I think "/" is not valid in id value.  That is not a worry now with html5.

    http://www.w3.org/TR/html4/types.html#type-id

    http://www.w3.org/TR/html5/dom.html#the-id-attribute

    Tuesday, July 22, 2014 9:22 PM

  • If that's the flow, then load and error handlers never get chance to dispatch, is my belief.  Not until loadpics() is exited.  So pcheck=0 never can get cleared.  (Even if it did, there could be many many false <img>s created in the meantime).  Which IE did this work with before?  Possibly I can try an experiment to compare.  Maybe I am wrong.


    Hi again,

    It worked on IE8 and windows xp. But I believe you´re right, I put an alert inside the .onerror handler function, and it never fired. Do you have any ideas on how to solve it?

    thanks

    Fabean

    Tuesday, July 22, 2014 11:36 PM
  • ----------( Fabean.html )----------
    
    <!DOCTYPE html>
    <html>
    <head>
    	<title> local js test </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    	<script src=Fabean.js type=text/javascript></script>
    </head>
    <body id=spics>
    	<h1>Fabean's edu_1 photos</h1>
    	<br>
    </body>
    </html>
    
    
    ----------( Fabean.js )----------
    
    onload = function() {
    
    	loadpics( 0, null );
    
    	function loadpics( pnum, nImg ) {
    
    		if (pnum) document.getElementById("spics").appendChild( nImg );
    
    		pnum++;
    		var pname = "images/" + window.location.pathname.slice(window.location.pathname.indexOf("edu_1"), window.location.pathname.indexOf(".")) + "_" + pnum + ".png";
    
    		nImg = document.createElement('img');
    		nImg.className = "smallpics";
    		nImg.style.border = (pnum==1) ? "4px solid rgb(106,26,65)" : "rgb(120,152,35) 4px solid";
    
    		nImg.onload = function(){ loadpics( pnum, nImg ) };
    
    		nImg.src = pname;
    		nImg.id = pname;
    	  //	nImg.onmouseover = function(){this.style.cursor='pointer';imhover(this);}
    	  //	nImg.onmouseout = function(){hoverout(this);}
    	  //	nImg.onclick = function(){clearInterval(picchange);document.getElementById("p1").src=u;this.style.border='4px solid black';greenout(this);}
    	}
    }

     

    I restructured your code so each successful img onload starts loading the next img in the sequence.  The onerror handler was no longer needed, because this way, it just stops fetching on its own.

     

    In addition to working with IE9+, it still works with XP+IE8.  I checked.  I also tested your original code with XP+IE8, and it worked fine there.  But like you said, it hangs on newer IE.  That's really interesting, Fabean.  Thanks for telling about it.

    • Marked as answer by Fabean Wednesday, July 23, 2014 9:56 AM
    Wednesday, July 23, 2014 6:30 AM
  • Wow!

    That´s great, thumbdown! Everything works as far as I can see. Really great help, I´ve been stuck on this for quite some time.

    Thanks!

    Fabean

    Wednesday, July 23, 2014 9:56 AM