Question

我创建了一个基于流体网格的网站，现在我想在iframe中添加电影内容。由于iframe正在改变大小，因此我想要添加以下3种尺寸的内容：

-option1 size：720p：1280 x 720
-option2尺寸：480p：854 x 480
-option3尺寸：360p：640 x 360

现在我正在寻找一个测量用户屏幕的脚本，然后将按钮的href更改为选项1,2或3。

这是我走了多远。我希望有人有一个例子。

<a target="iframe_cinema" onclick="myFunction() href="option1" id="window"  class="button2 white">
            <img src="images/3D.png"</div></a>

<script>
function myFunction()
{

var x=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


if (Width<640)
  {
  x="option1";
  }
else if (Width<854)
  {
  x="option2";
  }
else
  {
  x="option3";
  }

</script>

提前感谢。

Answer 1

另一种选择。根据大小使用媒体查询和显示/隐藏按钮。

CSS Media Way

<!DOCTYPE html>
<html>
  <head>
    <style>

        @media screen {
            #div3{ display : block; }
            #div1, #div2{ display : none; }
        }        


        @media screen and (max-width:800px) {
            #div2{ display : block; }
            #div1, #div3{ display : none; }
        }

        @media screen and (max-width:400px) {
            #div1{ display : block; }
            #div2, #div3{ display : none; }
        }

    </style>
  </head>
  <body>
      <div id="div1">ONE</div>
      <div id="div2">TWO</div>
      <div id="div3">THREE</div>
  </body>
</html>

你正在做的JavaScript方式：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <a href="#option1" id="myLink">LINKY</a>
    <script>    
        (function(){    
            var link = document.getElementById("myLink");    
            function checkWidth() {
                var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                    newHref;
                if (width<640) {
                  newHref="#option1";
                } else if (width<854) {
                  newHref="#option2";
                } else {
                  newHref="#option3";
               }
               link.href=newHref;       
            }
            link.onclick = checkWidth;
            checkWidth();
        })();          
    </script> 
  </body>
</html>

使用javascript根据屏幕大小更改按钮的href

1 个答案: