【发布时间】：2016-09-08 12:37:43
【问题描述】：
如何根据视口参数动态插入 div？因为我在管理没有响应的横幅广告方面需要帮助。例如，仅当 body 客户端宽度大于 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>
【问题讨论】：
-
不再需要在脚本块中添加 HTML 注释。事实上，我认为自 2000 年以来就没有必要这样做了。
-
你能分享一个链接到你的网页吗？我无法重现您展示的广告。
-
@PinkTurtle prowrestling.com。它没有实时显示代码，因为它没有显示横幅。所以我恢复到广告网络提供的原始代码。我要更改的部分是导航栏下方的横幅广告。
-
我认为您可以加载两个广告尺寸并根据窗口大小调整显示/隐藏它们。那有意义吗 ？您能否同时显示两种广告尺寸？
-
@PinkTurtle 这是有道理的。我不想同时显示两种广告尺寸，因为 300x250 仅适用于移动设备。我正在考虑可能废弃 javascript，因为它不起作用并切换到 CSS，所以我可以调整 728x90 的大小以适应所有屏幕。不过，将不得不更多地研究这种方法。由于 728 的支出超过 300，因此尽可能保留它是有意义的。
标签： javascript html css