根据视口参数动态插入一个div [英] Insert a div dynamically based on the viewport parameter

问题描述

如何根据视口参数动态插入一个div?因为我需要帮助管理没有响应的横幅广告.例如，仅当正文客户端宽度大于 768 时才会加载 728x90、970x250、160x600 的顶部 div，否则将加载 320x50 标签 div.

现在我在网上做:

<script type="text/javascript"><!--e9 = 新对象()；e9.size = "728x90";//--></script><script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProWrestlingcom/ROS/tags.js"></script>

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

<script type="text/javascript"><!--e9 = 新对象()；e9.size = "320x50";//--></script><script type="text/javascript" src="http://tags.expo9.exponential.com/tags/ProwrestlingcomMobile/320x50/tags.js"></script>

更新:

我创建了这个，从逻辑上讲它应该可以工作，但它不显示任何内容，除非我的浏览器有问题.有人可以检查吗?

解决方案

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

因此，如果您真的需要在调整大小时重新加载广告(但为什么呢?)，您应该销毁所有 e9 全局对象并重新初始化它们.

这样的事情应该可以工作.但是，当页面加载时，我建议只做一个

How can I insert a div dynamically based on the viewport parameter? As I need help with managing banner ads that are not responsive. For example the top divs for 728x90, 970x250, 160x600 would only load if the body client width is greater than 768 or else would load a 320x50 tag div instead.

Right now I am doing on web:

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

However, how it should work is when screen width is less than 768 it would show my 300 x 50 instead:

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

UPDATE:

I created this, which logically sounds like it should work but it doesn't display anything, unless there's something wrong with my browser. Can someone check?

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

解决方案

Ad script creates several global variables: e9Manager, e9AdSlots, e9Loader and then checks if they are initialized: if (e9Loader === undefined). If they are, script does nothing.

so if You really need to reload ads on resize (but why?), You should destroy all e9 global objects and reinit them.

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

Something like this should work. However, I would sugest to do it only one, when page loads

这篇关于根据视口参数动态插入一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！