javascript动态插入代码并执行
更新日期:
作为一名小白，经常会犯些小白的问题，上周一个需求需要使用ajax异步请求代码，并且执行返回的代码。原本以为直接innerHtml到页面上就能执行了。结果被主管狠狠的鄙视了。。。好吧以前真没遇到过 = =。于是决定好好搞懂下。
首先是错误的演示，这边就不用异步获取代码了，方便演示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> </head> <body> <div id="test"></div> <script type="text/javascript"> var responseHtml = '<scr'+'ipt>alert("我是小白。。。")</scr'+'ipt>'; document.getElementById("test").innerHTML = responseHtml; </script> </body> </html> |
通过innerHTML插入的js代码不会执行。css，html倒是都没问题。
好吧下面就找些办法来解决这个需求。
使用eval
作为一个前端，一听到eval顿时一个机灵。不过有的时候还真得靠他。
我们要这么干：
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> </head> <body> <script type="text/javascript"> var responseHtml = '<scr'+'ipt>alert("我是小白。。。")</scr'+'ipt>'; responseHtml = responseHtml.replace(/<\/?sc[^\>]+>/g,'') eval(responseHtml); </script> </body> </html> |
原理就是把script标签去掉，拿到代码用eval执行。
当然如果觉的eval不安全，可以使用new Function的形式。
使用document.write()
使用document.write()插入到页面的代码是可以执行的，方法为：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> </head> <body> <div id="test">asdasdfsdf</div> <script type="text/javascript"> var responseHtml = '<scr'+'ipt>alert("我是小白。。。")</scr'+'ipt>'; document.write(responseHtml); </script> </body> </html> |
可惜这个限制太多，会清空之前页面内容。
黑魔法，图片加载js
这个方法比较讨巧，我们知道img标签上可以使用onload=”code”来执行js代码。这个就是利用了这一点。
1 2 3 4 5 6 7 8 9 | <html> <head> </head> <body> <img src="empty.gif" alt="" onerror='alert("我是小白。。。");this.parentNode.removeChild(this);' /> </body> </html> |
最常用的dom注入
这个大概是最正统的做法了，无副作用，而且更通用还异步加载。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> </head> <body> <div id="test"></div> <script type="text/javascript"> var responseHtml = '<scr'+'ipt>alert("我是小白。。。")</scr'+'ipt>'; responseHtml = responseHtml.replace(/<\/?sc[^\>]+>/g,'') var ele = document.createElement("script"); //ele.src = "xyz.js"; ele.innerHTML = responseHtml; document.body.appendChild(ele); </script> </body> </html> |
也可以使用src注入js的线上地址。
结语
长路漫漫，js的坑真是太多了。作为小白只能遇到一个总结一个。