如何使用包含内联 JS 的 <script> 标记动态添加 div 以便执行此 WAS?

Posted

技术标签:

【中文标题】如何使用包含内联 JS 的 <script> 标记动态添加 div 以便执行此 WAS?【英文标题】:How do dynamically ad div with <script>tag including inline JS so that this JS executes? 【发布时间】:2012-02-23 17:19:13 【问题描述】:

我在尝试动态添加和执行包含内联 javascript 的 div 时遇到问题?

var div = document.createElement('DIV'); div.onready = (function(name) return GA_vitalFillSlot(name); )(wallpaper_ads.custom[i]); document.getElementById('wallpaperAdContainer').appendChild(div);

其中wallpaper_ads.custom[i] 包含一个字符串,例如'BMX_wallpaper_2328x1080_homepage'。 上面的代码不起作用。但如果我将GA_vitalFillSlot() 更改为alert(),它会起作用:

var div = document.createElement('DIV'); div.onready = (function(name) return alert(name); )(wallpaper_ads.custom[i]); document.getElementById('wallpaperAdContainer').appendChild(div);

另外,做这样的事情也不起作用:

var js = document.createElement('SCRIPT'); js.type = '文本/javascript'; js.innerhtml = 'GA_vitalFillSlot("'+wallpaper_ads.custom[i]+'");'; document.getElementById('wallpaperAdContainer').appendChild(js);

有什么想法吗?

【问题讨论】:

【参考方案1】:

要么:

js.src = 'myCode.js';

js.text = 'alert("hey");';

使用 innerHTML 插入的脚本不会被执行。

【讨论】:

我没有 GA_googleFillSlot() 的 Google DFP 代码源,所以我无法使用它。我只能尝试执行已经加载的函数。【参考方案2】:

这行代码:

(function(name) return GA_vitalFillSlot(name); )(wallpaper_ads.custom[i]);

正在立即执行,将div.onready 设置为等于GA_vitalFillSlot(name) 的结果。更改它,使 onready 指向一个函数:

div.onready = (function(name)  
    return function() 
        GA_vitalFillSlot(name);
    ;
)(wallpaper_ads.custom[i]);

【讨论】:

【参考方案3】:

这应该可以工作

js.src = 'GA_vitalFillSlot("'+wallpaper_ads.custom[i]+'");';

【讨论】:

以上是关于如何使用包含内联 JS 的 <script> 标记动态添加 div 以便执行此 WAS?的主要内容,如果未能解决你的问题,请参考以下文章

博客文章中的 Gatsby-js 客户端 javascript 内联

使用内联 <script> 从 html 文件加载 js 文件时出现 404 错误

如何在 Haml 中包含内联 JavaScript?

在 ASP.Net 中使用 tinymce 内联 div InnerHtml

RequireJS - 在 require 流和内联中加载 AMD 模块

Vue.js style (内联样式)