Html Question posted in
Some basic documentation can be found here.

Html – How to use Javascript media queries with window.addEventListener?

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search