javascript - 根据视口(viewport)参数动态插入一个div

Question

如何根据视口(viewport)参数动态插入一个 div？因为我需要帮助来管理没有响应的横幅广告。例如，只有当主体客户端宽度大于 768 时，才会加载 728x90、970x250、160x600 的顶部 div，否则将加载 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>

像这样的东西应该可以工作。但是，我建议只在页面加载时执行一次