使用innerHTML插入js脚本不生效问题解决

最新推荐文章于 2021-09-05 12:41:36 发布

Rex~

最新推荐文章于 2021-09-05 12:41:36 发布

阅读量5.4k

点赞数 4

文章标签： html javascript html5

本文链接：https://blog.csdn.net/Rex__404/article/details/120050912

版权

本文探讨了使用innerHTML向网页插入按钮和JS脚本时遇到的问题，即内联JS不执行。原因是innerHTML插入的文本可能引发安全风险，HTML5规定不执行这种方式插入的脚本。为了解决这个问题，文章提供了正确的做法，即通过创建并注入脚本来确保JS正常执行。示例代码展示了如何创建元素和脚本，并将脚本正确地插入到DOM中，以确保点击按钮时弹出提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.起因：

在使用innerHTML向某个网页插入一个按钮button，和对应的js，发现js不生效
原始代码

 var mylogin = document.createElement("button");
 var myjs = document.createElement("script");
	mylogin.innerHTML = '<button type="button" οnclick="tologin()">提交</button>'
	myjs.innerHTML = '<script>function tologin(){window.alert("成功")}<script>

2.问题思考：

参考自解决innerHTML插入js不运行问题
因为用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。所以HTML 5 中指定不执行由 innerHTML 插入的

3.问题解决：

正确的做法是创建脚本，然后注入内容。参考自如何使用innerHTML向div中插入js脚本

var mylogin = document.createElement("button");
 mylogin.innerHTML = '<button style="background-color: deepskyblue " type="button" οnclick="tologin()">提交</button>'       
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = 'function tologin(){window.alert("success!")}'
s.parentNode.insertBefore(g, s);