Why javascript document.write does not work in Firefox?

I have an html page displaying an image. it should be delayed, change on the video, and then after playing the video change 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 mainly works in IE (the second timeout does not work, but I just opened this). This does not work at all in Firefox. There are no delays, the video just starts playing, and I never see the image; before or after.

any thoughts on this would be wonderful.

edit: it seems like document.write is to blame. changing the name to reflect that.

if my initial question was not clear, I am looking to replace the image with a video, and then replace the video with an image. this is all loading in an iframe, so I need to use document.write (or something like this) to actually change the html.

+1
source share
2 answers

Using document.write after the page is already loaded is a bit strange. This should only be used to create a page when it loads. Try something like this:

 <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> 
+5
source

The most likely problem is that opening / writing and closing a document completely clears it, clearing the current timeouts and in the process.

As stated in the Document Object Model HTML

Open
Open the document stream for recording. If the document exists in target, this method clears .

Since firefox implemented the clear part (full cleanup)

+3
source

Source: https://habr.com/ru/post/1500570/


All Articles