Question

我正在设置javascript以在大于767的屏幕上显示728x90的广告网络横幅代码。如果屏幕宽度较小，则仅显示300x250横幅代码。当我添加以下代码时，它在网络和移动设备上都没有显示，只是一个空白区域。如果有帮助，我在wordpress内部工作。

    <div class="container">ՙ



<script>
window.onresize = function(){

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

if ( $(window).width() <= 767) {

e9 = new Object();
e9.size = "320x50";
script.src = "http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js";
head.appendChild(script);

}else {

e9 = new Object();
e9.size = "728x90";
script.src = "http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js";
head.appendChild(script);

}
}
</script>
</div>

原始728x90广告代码：

<script type="text/javascript"><!--
               e9 = new Object();
    e9.size = "728x90,970x250";
//--></script>
<script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js"></script>

原始300x250广告代码：

<script type="text/javascript"><!--

               e9 = new Object();

    e9.size = "320x50";

//--></script>

<script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js"></script>

Answer 1

此代码有两个问题：

1）在调整窗口大小时会多次调用window.onresize，导致脚本标记被多次添加

2）window.onresize只会在调整大小时调用，而不是在加载时调用。 window.onload将被调用一次，添加脚本。所以也许只需要改变window.onresize =＆gt;在window.onload

Answer 2

您可以使用<iframe＆gt;元素和css媒体查询可以切换两个<iframe>元素，其中src设置为html，分别包含<script>，728x50 300x250

的style.css

@media (max-width: 767px) {
  iframe[src="728.html"] {
    display: none;
  }
}

@media (min-width: 767px) {
  iframe[src="300.html"] {
    display: none;
  }
}

的index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <iframe src="728.html" width="728px" height="90px" style="border:none;" scrolling="no"></iframe>
  <iframe src="300.html" width="300px" height="250px" style="border:none;" scrolling="no"></iframe>
  </body>
</html>

300.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="background:green;width:320px;height:250px;">
<script type="text/javascript"><!--
    e9 = new Object();
    e9.size = "320x50";
//--></script>
<script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js"></script>
  </body>
</html>

728.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="background:blue;width:728px;height:50px;">
  <script type="text/javascript"><!--
    e9 = new Object();
    e9.size = "728x90,970x250";
//--></script>
<script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js"></script>
  </body>
</html>

plnkr http://plnkr.co/edit/L7yWvl9YGLpBtIKWT87x?p=preview

Viewpoint参数结束标记问题

2 个答案: