How to use Javascript media queries with window.addEventListener?

Question

How to use Javascript media queries with window.addEventListener?

77 Views Asked by Allu At 20 October 2024 at 20:12

I am trying to use Javascipt media queries, but I can not get it work.

I am trying that iframe loads the frame only when size is less than 700px,:

<script>
mobile();
function mobile(){

    const mql = window.matchMedia('screen and (max-width: 700px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

          function frameloading() {
              var frameone= document.getElementById("delayedframe");
              frameone.src = "360°-image url"
          };
          window.addEventListener("load",(frameloading));
        }
    }
}
</script>

<iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="200px" width="100%""><p>Your browser does not support iframes.</p></iframe>

I am used this post with this test: Multiple media queries in javascript

And I am also tried with:

<script>
function checkMediaQuery() {
  if (window.innerWidth > 700) {
    function frameloading() {
        var frameone= document.getElementById("delayedframe");
        frameone.src = "360°-image url"
    };
    window.addEventListener("load",(frameloading));
  }
}


window.addEventListener('resize', checkMediaQuery);
</script>

<iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%" class="forcewide"><p>Your browser does not support iframes.</p></iframe>

Whole of those not loading the iframe when width is less than 700px.

Original Q&A

There are 2 best solutions below

Aniket Raj On 04 January 2024 at 21:57

On window load we called mobile() then it will use window.matchMedia to validate media queries using window.matchMedia().matches. If condition gets true then frameloading() will be called.

Below is the working code:

      function mobile() {
        const mql = window.matchMedia("screen and (max-width: 700px)");
        // listener on changes
        mql.addListener(checkMedia);
      }

      function checkMedia(mql) {
        if (mql.matches) {
          frameloading();
        }
      }

      function frameloading() {
        alert('media query working');
        const frameone= document.getElementById("delayedframe");
        frameone.src = "360°-image url"
      }

      window.addEventListener("load", mobile);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="200px" width="100%" "><p>Your browser does not support iframes.</p></iframe>
  </body>
</html>

**Allu** · Accepted Answer

I solved my problem by using this jQuery based code:

$(document).ready(function()
{
if ($(window).width() <= 700)
     $('#IFRAMEID1').attr("src","url of the iframe");

<iframe id="IFRAMEID1" src="about:blank" frameborder="0" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"><p>Your browser does not support iframes.</p></iframe>

I found template for this testing from here: https://stackoverflow.com/a/28795767/14276740

How to use Javascript media queries with window.addEventListener?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IFRAME

Related Questions in MEDIA-QUERIES

Related Questions in MEDIAQUERY

Trending Questions

Popular # Hahtags

Popular Questions