How to use Javascript media queries with window.addEventListener?

Question

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.

Aniket Raj · Accepted Answer · 2024-01-04 22:11:05Z

1

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>

edited Jan 4, 2024 at 22:11

answered Jan 4, 2024 at 21:57

Aniket Raj

2,1291 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Allu Over a year ago

Thanks for your answer, but this is only working when I change the windows size. I would like that it loads the frame straight when my width is below 700px and I do not need to resize the window. Is there some solution which will show the frame without resizing the window when size rules match ?

Aniket Raj Over a year ago

Ok means you want to load directly iframe when screen is below 700px , resizing does not require first time?

Allu Over a year ago

Yes, I would like that the frame loads directly when I watch the page with 700px below screens.

Aniket Raj Over a year ago

I think it is working as you want to have... can you please make me understand in detail?

Allu Over a year ago

So, your code loads the iframe only when I resize the window size. It does not load iframe when I watch the page only for example screen size of 650px width. I need to resize the window and then if the window size falls below 700px width it loads the iframe. In my code below the iframe will be loaded directly without needing to resize the window width when the window width is under 700px. I can put different ID to all the breakpoint's iframes. So, on the jQuery code there have been told, what ID is used for each width iframe.

|

Allu · Accepted Answer · 2024-01-05 19:34:38Z

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

answered Jan 5, 2024 at 19:34

Allu

531 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to use Javascript media queries with window.addEventListener?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related