CODEWITHSUNDEEP
javascripthtmlgoogle-chromefirefoxmjpeg
avivr
avivr

Reputation: 2593

Webpage rendering act differently between chrome/firefox after calling window.location.assign

I have a web page showing a live mjpeg video stream (as 'img') and a link to download bitmap file (last saved snapshot of that video stream).

When I click the link in Chrome, the browser download the bmp file and the video stream keeps rendering with no problems.

When I do the same thing in FireFox, a dialog prompts to 'save/open' the file and the live video stop rendering on the page. an empty place holder is displayed instead of the image.

Here is a small html code to demonstrate the problem:

<html>
<head>
<script>
    function DownloadFile(link) {
        window.location.assign(link);
    }
</script>
</head>
<body>
    <img align="center" src="http://148.61.151.202/mjpg/video.mjpg?camera=1" height="375" width="500">
    <div style="color: rgb(142, 217, 255);" 
        onclick="DownloadFile('http://www.mywrapper.com/downloadfile/plug-ins/circle.bmp');">
        Download
    </div>
</body>
</html>

How can I enable downloading the bitmap file and keep the page rendering correctly both in FF and Chrome?

Upvotes: 1

Views: 366

Answers (1)

user3459110
user3459110

Reputation: 7061

This is because of the different ways in which the two browsers handle the process of link assignment. You can sandbox the link assignment with a hidden iframe in Firefox to solve this issue. See below:

<html>
    <head>
        ...
    </head>
    <body>
        <img align="center" src="http://148.61.151.202/mjpg/video.mjpg?camera=1" height="375" width="500">
        <button id="download">
            Download
        </button>
        <iframe style="display:none" id="f"></iframe>
        <script type="text/javascript">
            function DownloadFile (link) {
                var f = document.getElementById("f");
                f.contentWindow.location.assign(link);
            }
            document.getElementById("download").addEventListener('click', function(){
                DownloadFile('http://www.mywrapper.com/downloadfile/plug-ins/circle.bmp');
            });
        </script>
    </body>
</html>

This essentially causes FF to let the main window continue with it's work and creates an iframe which has a window of its own, referred to by iframeElement.contentWindow and follows the link assignment there.

The iframe was hidden with css :)

Some changes I done in your code:

  1. Always put the script tag before the ending body tag. This ensures that the DOM is loaded correctly and that we can work on it. Also, script loading is blocking, which slows down page load. Putting them at the end takes care of this.
  2. Don't use inline event listeners (i.e. onclick=blabla). Look up, learn, practice, and use addEventListener.
  3. Follow proper semantics, use button in place of button. A div with an onclick makes no sense at all.

Upvotes: 2

Related Questions