插入和执行条件JavaScript [英] Inserting and executing conditional javascript
问题描述
更新：（更多信息关于我在做什么）
我希望有条件地加载不同大小的Google DFP广告，具体取决于浏览器窗口的宽度。因此，台式机/ iPad可能会看到一个720像素宽的广告，广泛的移动设备可能会看到一个480像素的广告，一个基本的移动设备可能会看到320px的广告。
Google DFP异步方法的主要代码在头。然后，通过组合具有编号的id和具有相同编号的函数调用的广告调用。
所以在我要完成的事情中，我需要将一个编号的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操作，所以任何帮助都不胜感激。
您使用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'）; （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 attribtue并加载外部文件。
如jfriend00所示，如果您可以确定在页面加载期间插入的标记， document.write 是一个可行的替代方法，因为它将导致包含的脚本被执行。但是在页面加载完成后您不能使用它。
编辑
的窗口：
var width = window.innerWidth || document.body.clientWidth;
应该做。请注意，在IE中，clientWidth比窗口宽度小20像，因为它允许垂直滚动条。但是这并不重要。
另外，在文档加载完成之前，不应该测量clientWidth ，以使布局完成（使用onload或以后的东西），并确保文档具有DOCTYPE，以便IE处于标准模式（或几乎标准模式或任何）。
您也可以对如何测量视口。
Working on a Mobile First design and want to conditional load and execute some JavaScript based on the browser width.
UPDATE: (more info on what I'm doing)
I'm looking to conditionally load different size Google DFP ads depending on the width of the browser window. So a desktop/iPad might see a 720 pixel wide ad, a wide mobile might see a 480px ad and a basic mobile might see a 320px ad.
Google DFP has an asynchronous method which has the main code in the head. Ad calls are then made via a combination of a div with a numbered id and a function call that has the same number.
So in what I'm trying to accomplish, I need to insert both a numbered div and a specific numbered function call into the div where I want the specific ad call to appear.
Looked around for conditional examples and this worked in my test:
<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>
Obviously just a test of the width checking and not the ad call.
If I understand correctly, innerHTML won't work if I need to dynamically load and execute some JavaScript.
Basically, when I test for the size I have to enter an ad call like this into the #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>
Notice the "-2" in both the div and function. That will be different for the different ad sizes.
Completely new to DOM manipulation so any help is greatly appreciated.
You are correct that script elements inserted using the innerHTML property aren't executed.
A simple solution is to collect the script elements that were inserted and replace them with new elements where the code will be executed, e.g.
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);
}
}
}
It is much better if the scripts have a src attribtue and load an external file.
As jfriend00 says, if you can determine the markup to be inserted during page load, document.write is a viable alternative as it will cause included scripts to be executed. But you can't use it after the page has finished loading.
Edit
As for getting the width of the window:
var width = window.innerWidth || document.body.clientWidth;
should do. Note that in IE, clientWidth is 20px less than the window width because it allows for a vertical scroll bar. But that shouldn't matter here.
Also, clientWidth shouldn't be measured until the document has finished loading so the layout is complete (use onload or something later), and make sure documents have a DOCTYPE so that IE is in standards mode (or "almost standards mode" or whatever).
You might also be interested in How to Measure the Viewport.
这篇关于插入和执行条件JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
