Question

如何根据viewport参数动态插入div？我需要帮助管理没有响应的横幅广告。例如，728x90,970x250,160x600的顶部div仅在主体客户端宽度大于768时加载，否则将加载320x50标签div。

现在我正在网上做：

<div id="ezoic-pub-ad-placeholder-100">
<script type="text/javascript"><!--
               e9 = new Object();
    e9.size = "728x90";
//--></script>
<script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js"></script>
</div>

然而，它应该如何工作是当屏幕宽度小于768时，它会显示我的300 x 50而不是：

<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>

更新

我创建了这个，逻辑上听起来应该可以工作，但它没有显示任何内容，除非我的浏览器出现问题。有人可以查一下吗？

<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>

Answer 1

广告脚本会创建多个全局变量：e9Manager，e9AdSlots，e9Loader，然后检查它们是否已初始化：if (e9Loader === undefined)。如果是，脚本什么都不做。

所以，如果您确实需要在调整大小时重新加载广告（但为什么？），您应该销毁所有e9全局对象并重新启动它们。

<script>
    window.onresize = function(){
        console.log('resize');
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.setAttribute('id', 'ad_script');
        e9 = new Object();
        e9Loader = undefined;
        e9Manager = undefined;
        e9AdSlots = undefined;

        var element = document.getElementById("ad_script");
        if (element) {
            element.parentNode.removeChild(element);
        }   
        if ( window.innerWidth <= 767) {
            e9.size = "320x50";
            script.src = "http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js";
            head.appendChild(script);
         } else {
            e9.size = "728x90";
            script.src = "http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js";
            head.appendChild(script);
        }
    }
    window.onload = function(){
        window.onresize();
    };
</script>

这样的事情应该有效。但是，当页面加载

时，我只会选择一个

Answer 2

我认为Window.matchMedia（）是你的朋友。这是API

您可以创建如下规则：

var mq = window.matchMedia( "(min-width: 500px)" );

听窗口调整大小

window.onresize = function(){
  if(mq.match){ //show or hide what you need }
}

Answer 3

检查客户端的宽度：

window.onresize = function(){
  if(window.innerWidth <= 767){ 
    // Code to display a DOM element.

  }
}

Answer 4

这样的事情可能会起作用

function insertDiv(){
    var screenSize = document.width;
    var bannerWrapper = document.getElementById('bannerWrapper');

    if(screenSize > 1200){
        bannerWrapper.innerHtml('<div class="bigBanner">Buy this!</div>');
    }else if(screenSize > 600 && screenSize < 1999){
        bannerWrapper.innerHtml('<div class="mediumBanner">Buy this!</div>');
    }else if(screenSize < 599){
        bannerWrapper.innerHtml('<div class="smallBanner">Buy this! </div>');
    }
}

Answer 5

您在更新的问题中的功能看起来不错，但它需要触发调整大小事件才能使其工作，这就是为什么页面加载时没有任何反应。

此外，您需要弄清楚加载另一个脚本是否会覆盖前一个脚本的功能（当您更改大小时会发生这种情况），并且您还应该在添加新脚本时清理之前的脚本。（请注意，您的代码会向页面头部添加一个新脚本每次重新调整大小事件）

如果您可以加载两个脚本然后只选择要调用哪个脚本会更容易，但由于这看起来像第三方API，因此可能无法实现。

要修复我提到的第一个问题，您只需要在页面加载时运行用于调整大小回调的函数。您可以将该代码定义为函数，然后将该函数体附加到调整大小侦听器，并手动执行一次：

function handleResize(){

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

  if ( $(window).width() <= 767) {
    e9.size = "320x50";
    script.src = "http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js";    
  } else {
    e9.size = "728x90";
    script.src = "http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js";    
  }
}

head.appendChild(script);

window.onresize = handleResize; // attach it
handleResize(); // run it once

Answer 6

<script>
var createAds = function() {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.id = "ads";
  head.appendChild(script);

  return script;
};

var resizeAds = function(){

  var ads = document.getElementById('ads') || createAds();

  var width = window.innerWidth || window.screen.width;

  // It seems that your .js needs to get the e9 global object
  window.e9 = window.e9 || new Object();

// HTTP ommitted for use the current protocol: http/https

  if (width <= 767) {
    window.e9.size = "320x50";
    ads.src = "//tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js";
  } else {
    window.e9.size = "728x90";
    ads.src = "//tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js";
  }

};

resizeAds();
window.onresize = resizeAds;
</script>

Answer 7

您可以在页面加载后使用https://github.com/krux/postscribe呈现广告。完整的工作示例：

<html>
<head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.6/postscribe.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
        window.onresize = function(){
            $('#ezoic-pub-ad-placeholder-100').children().remove();
            if ( $(window).width() <= 767) {
                e9 = new Object();
                e9.size = "320x50";
                $(function() {
                    postscribe('#ezoic-pub-ad-placeholder-100', '<script src="http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js"><\/script>');
                });
            }else {
                e9 = new Object();
                e9.size = "728x90";
                $(function() {
                    postscribe('#ezoic-pub-ad-placeholder-100', '<script src="http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js"><\/script>');
                });
            }
        }
        window.onload = function(){
            window.onresize();
        };
</script>

</head>
<body>
    <div id="ezoic-pub-ad-placeholder-100"></div>
</body>
</html>

无法从异步加载的外部脚本写入文档的问题。所以postcribe决定了这个问题。

Answer 8

使用onresize处理程序而不debounce会导致性能下降。这真的很糟糕。尽量避免这种情况。有关详情，请访问http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

Answer 9

这可能不是你原本想要的，但为什么不试一下纯粹的CSS？

您的目标是根据用户视口显示不同的广告。使用css，您可以根据实际用户分辨率轻松显示/隐藏元素。你甚至不必抓住任何活动或包括任何图书馆。您甚至可以让您的广告响应（再次，非常轻松）或在打印页面时隐藏它们。

HTML

<a href="#target-page" class="banner">
  <span class="shadow"></span>
  <span class="text">Banner</span>
</a>
<a href="#target-page" class="banner only-small-viewport">
  <span class="shadow"></span>
  <span class="text">small screen</span>
</a>
<a href="#target-page" class="banner only-large-viewport">
  <span class="shadow"></span>
  <span class="text">large screen</span>
</a>

CSS

.banner { 
  display: block;
  position: relative;
}
.banner .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 10vmax;
}
.banner .shadow {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(255,255,255, 0.8);
  transition: 1s background-color;
  z-index: 100;
}
.banner:hover .shadow {
  background-color: rgba(255,255,255, 0);
}

@media (max-width: 768px) {
  .banner.only-large-viewport { display: none; }
}
@media (min-width: 768px) {
  .banner.only-small-viewport { display: none; }
}


.banner {
  background-image: url("http://speciale-life.com/wp-content/uploads/2016/03/zoom-1-400x225.jpg");
  width: 400px;
  height: 225px;
}
@media (min-width: 736px) {
  .banner {
    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/35/ae/b8/35aeb834c602ba9394e3163fe66cca9d.jpg");
    width: 736px;
    height: 414px;
  }
}
@media (min-width: 736px) {
  .banner {
    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/35/ae/b8/35aeb834c602ba9394e3163fe66cca9d.jpg");
    width: 736px;
    height: 414px;
  }
}
@media (min-width: 1280px) {
  .banner {
    background-image: url("http://cfile22.uf.tistory.com/image/2571CB3856D7FA8138BAA1");
    width: 1280px;
    height: 721px;
  }
}

Here is jsFiddle

Answer 10

两个主要问题。

window.onresize每次浏览器大小都会更改，即使它只是一点点，所以需要管理 - 你不希望它一直在加载脚本。

要解决此问题，您可以在每次浏览器调整大小时运行检查，但只有在更改为新大小时才会执行某些操作。您还应该在页面首次运行时运行检查，或者您将等待如上所述触发调整大小事件。

var banner_current = "a";
function banner_check() {
    var screen_size = document.width;
    var banner_suggested = ""; 
    if (screen_size > 1200) {
        banner_suggested = "a";
    } else if (screen_size > 600){
        banner_suggested = "b";
    } else {
        banner_suggested = "c";
    }
    if (banner_suggested !== banner_current) {
        banner_load(banner_suggested);
    }
}
window.onresize = banner_check;
banner_check();

一旦您异步添加了一个脚本，您可能需要对其进行初始化才能使其正常工作。

这将涉及删除或重置它正在使用的任何变量，并且它可能在启动时检查，并且还调用init函数。我不知道你的脚本具体，但以下内容应该有效。

function banner_load(new_banner) {

    // check for existing script here and delete if present

    // create new script
    var script_new = document.createElement('script');
    switch(new_banner) {
        case "a":
            script_new.src = "https://new-script.com/js_a.js";
            break;
        case "b":
            script_new.src = "https://new-script.com/js_b.js";
            break;
        default:
            script_new.src = "https://new-script.com/js_c.js";
    }
    script_new.type = 'text/javascript';
    script_new.async = 'true';
    script_new.onload = script_new.onreadystatechange = function() {


         // check if vars defined and if so clear them, e.g:
         if (typeof e9Loader !== 'undefined') { e9Loader = null; }
         if (typeof e9Manager !== 'undefined') { e9Manager = null; }
         if (typeof e9AdSlots !== 'undefined') { e9AdSlots = null; }

         // run init function in new script

    };

    // load script
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script_new);

}

如果在添加另一个文件时没有删除一个文件，则可能会出现冲突的变量和函数名称，然后您将很难使新脚本正常运行。此链接概述了如何正确删除文件：

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

根据viewport参数动态插入div

10 个答案: