关于innerHTML的试验 · 前端笔记

## 关于innerHTML的试验先来开 **$.html()** ~~~ $('#header').html('<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=__VERSION__"></script></body><html>') // jquery.min.js?t=__VERSION__:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. Network 上显示脚本被加载了，并且加载后也执行了试验的jquery版本： jQuery v3.0.0-beta1 ----- 试验加载css运行了 ---- 试验运行js代码 $('#header').html('<script>alert(1)</script>'); 运行了 ---- 试验“运行css” $('#header').html('<style>#header{background:red}</style>'); 生效了 ~~~ 再看看 **innerHTML** 会有什么效果 ~~~ document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script></body><html>'; Network 上没有显示加载请求，也就是说 innerHTML插入的内容中有脚本加载的，也不会自动去请求脚本。 --------- 再试试图片 document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script><img src="1.png" /></body><html>'; Network 上显示了图片的请求。再试试css document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script><link href="http://tang-h5.com/src/css/app.css?t=__VE1212RSION__" type="text/css" rel="stylesheet" /></body><html>'; css会加载（注意改变版本号，不然有缓存干扰测试） ----- 再试试js代码 document.getElementById('header').innerHTML='<script>alert(1)</script>'; 不运行！试验“运行css” document.getElementById('header').innerHTML = '<style>#header{background:#fff}</style>'; 也生效了 ~~~ **分析结论：** | 测试动作 | $.html() | innerHTML | | --- | --- | --- | | 加载js文件 | √ | ✘ | | 加载css文件 | √ | √ | | 加载图片文件 | √ | √ | | 运行js | √ | ✘ | | “运行css” | √ | √ | （注意：注意缓存会干扰影响测试，每次测试都要改变版本号来测试）看来jquery自己做了处理啊传统网页浏览器默认处理这些动作，但是当自己组装页面时就不得不面对这些问题了，所以有必要把这个弄清楚。 > 这些测试动作，对单页有重要指导作用，尤其是在各种PJAX和单页框架盛行的现在，比如SUI、Mobilebone等创建页面时会出现哪些问题，通过实验分析，我们就知道为什么了，这是个重要但容易被忽视的知识。 ### 参考： [让插入到 innerHTML 中的 script 跑起来的实现代码](http://www.jb51.net/article/234.htm) [求教 innerHTML 里面放js代码如何才能执行-CSDN论坛](http://bbs.csdn.net/topics/392159082) [让 innerHTML 进来的 script 代码跑起来](http://www.cnblogs.com/zichi/p/run-innerHTML-script.html) [大流量网站性能优化：一步一步打造一个适合自己的BigRender插件 - 韩子迟 - 博客园](http://www.cnblogs.com/zichi/p/5252629.html) [淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式](https://lifesinger.wordpress.com/2011/09/23/bigrender-for-taobao-item/) [关于chrome控制台警告：Synchronous XMLHttpRequest on the main thread终极解决办法](http://blog.csdn.net/xllily_11/article/details/51879420) >[danger] 从上面的提示可以看出$.html()处理加载外部脚本时使用的是ajax同步哦（ajax同步获取脚本内容，创建script标签，然后把内容塞进去）。（不像require.js那样是通过创建script标签给src来加载的，利用的是浏览器的特性，当然浏览器处理外部脚本资源时，其实也是“同步加载”的，参见[你真的了解script标签吗？](https://www.kancloud.cn/xiak/quanduan/278616)） [jQuery源码——.html()方法原理解析 - 才子锅锅 - 博客园](https://www.cnblogs.com/ihardcoder/p/4497808.html) * * * * * last update：2017-8-7 18:15:20