why does javascript document.write not work on Firefox?_问答_开发者

why does javascript document.write not work on Firefox?

开发者 https://www.devze.com 2023-01-29 08:11 出处：网络

i have an html page displaying an image. it is supposed to delay, change to the video, then after the video plays, change back to the image. this is the javascript i am using:

<script type="text/javascript">
function playVideo(){
var str='**html of the video object**';
document.open();
document.write(str);
document.close();
}
function backToImage(){
var str='**html of the image**';
document.open();
document.write(str);
document.close();
}
setTimeout("playVideo()",1000);
setTimeout("backToImage()",3000);

</script>

this javascript works in Chrome and Safari. It mostly works in IE (the second time开发者_JAVA技巧out does not work, but i just discovered this). It does not work at all in Firefox. There is no delay, the video simply begins playing and i never see the image; before or after.

any thoughts on this would be great.

edit: so it seems that document.write is to blame. changing title to reflect this.

in case my original question was not clear, what i am looking for is to replace the image with the video, and then replace the video with the image. this is all loading in an iframe, so i need to use document.write (or something like it) to actually change the html.

Using document.write after the page has already loaded is a little weird. That should only really be used for generating a page as it loads. Try something like this instead:

<html>
  <head>
    <script type="text/javascript">

      function playVideo(){
        var str='**html of the video object**';
        document.getElementById('video-placeholder').innerHTML = str;
      }
      function backToImage(){
        var str='**html of the image**';
        document.getElementById('image-placeholder').innerHTML = str;
      }
      setTimeout(playVideo, 1000);
      setTimeout(backToImage, 3000);

    </script>
  </head>
  <body>
    <div id="video-placeholder"></div>
    <div id="image-placeholder"></div>
  </body>
</html>

The most likely issue, is the opening/writing and closing of a document completely clears it, clearing the current timeouts, in the process, as well.

As pointed in Document Object Model HTML