Question

使用Mobile First设计，并希望根据浏览器宽度有条件地加载和执行一些JavaScript。

更新:(有关我正在做的事情的更多信息）

我希望有条件地加载不同尺寸的Google DFP广告，具体取决于浏览器窗口的宽度。因此，桌面/ iPad可能会看到720像素宽的广告，广泛的移动广告可能会看到480px的广告，而基本的移动广告可能会看到320px的广告。

Google DFP广告管理系统有一个异步方法，主要代码在头部。然后通过具有编号ID的div和具有相同编号的函数调用的组合来进行广告调用。

因此，在我想要完成的任务中，我需要将一个带编号的div和一个特定编号的函数调用插入到div中，我希望显示特定的广告调用。

查看条件示例，这在我的测试中有效：

<div id="ad"></div>
<script type="text/javascript">
var ad = document.getElementById("ad");
if (document.documentElement.clientWidth > 640) {
ad.innerHTML = "big";
}
if (document.documentElement.clientWidth < 640) {
ad.innerHTML = "small";
}
</script>

显然只是对宽度检查的测试，而不是广告调用。

如果我理解正确的话，如果我需要动态加载和执行一些JavaScript，innerHTML将无法工作。

基本上，当我测试尺寸时，我必须在#ad div中输入这样的广告调用：

<div id='div-gpt-ad-xxxxxxxxxxx-2' 
style='width:728px;height:90px;margin:auto'><script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxxxxxxxxx-2'); });
</script></div>

注意div和函数中的“-2”。对于不同的广告尺寸，情况会有所不同。

完全不熟悉DOM操作，因此非常感谢任何帮助。

Answer 1

您是正确的，不会执行使用innerHTML属性插入的脚本元素。

一个简单的解决方案是收集插入的脚本元素，并用执行代码的新元素替换它们，例如。

function insertAndExecute(id, markup) {

    var sOld, sNew, scripts;
    var s;
    var el = document.getElementById(id);

    if (el) {
        s = document.createElement('script');
        el.innerHTML = markup;
        scripts = el.getElementsByTagName('script');

        for (var i=0, iLen=scripts.length; i<iLen; i++) {
            sOld = scripts[i];
            sNew = s.cloneNode(true);
            sNew.type = sOld.type;

            if (sOld.src) {
                sNew.src = sOld.src;
            } else {
                sNew.text = sOld.text;
            }
            sOld.parentNode.replaceChild(sNew, sOld);
        }
    }
}

如果脚本具有 src 属性并加载外部文件，则会好得多。

正如jfriend00所说，如果您可以确定要在页面加载期间插入的标记， document.write 是一个可行的替代方法，因为它将导致包含的脚本被执行。但是在页面加载完成后你就无法使用它了。

修改

至于获取窗口的宽度：

var width = window.innerWidth || document.body.clientWidth;

应该这样做。请注意，在IE中，clientWidth比窗口宽度小20px，因为它允许垂直滚动条。但这不重要。

此外，在文档完成加载之前不应测量 clientWidth ，因此布局已完成（使用onload或稍后的内容），并确保文档具有DOCTYPE，以便IE符合标准模式（或“几乎标准模式”或其他）。

您可能也对如何Measure the Viewport感兴趣。

Answer 2

如果您不熟悉DOM操作，那么立即停止并找到您喜欢的JavaScript库。 DOM是目前在浏览器中使用JavaScript最令人沮丧的部分，所以不要破坏你使用该语言的第一次体验，不要使用可以帮助你的库。两个不错的选择是YUI和jQuery。这很重要，因为您无法使用document.documentElement.clientWidth可靠地获得屏幕的宽度。不同的浏览器使用不同的属性。

关于您的问题，在这种情况下，只需在将内容插入广告容器后在脚本中运行代码即可。

<div id="ad"></div>
<script>
  document.getElementById('ad').innerHTML = '<div id="div-gpt-ad-xxxxxxxxxxx-2" style="width:728px;height:90px;margin:auto"></div>';
  if (screenWidth > 640) {
    googletag.cmd.push(function() {
      googletag.display('div-gpt-ad-xxxxxxxxxxx-2');
    });
  } else {
    // do something else
  }
</script>

插入和执行条件javascript

2 个答案:

修改