js动态加载css文件和js文件的方法-白红宇

js动态加载css文件和js文件的方法

阅读量：6578 次

发布时间：2019-06-24

本文共 1925 字，大约阅读时间需要 6 分钟。

今天研究了下js动态加载js文件和css文件的方法。网上发现一个动态加载的方法。摘抄下来，方便自己以后使用 [code lang="html"] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript includes - ready state and onload</title></pre> <script type="text/javascript"> var css; function include_css(css_file) { var html_doc = document.getElementsByTagName('head')[0]; css = document.createElement('link'); css.setAttribute('rel', 'stylesheet'); css.setAttribute('type', 'text/css'); css.setAttribute('href', css_file); html_doc.appendChild(css); // alert state change css.onreadystatechange = function () { if (css.readyState == 'complete') { alert('CSS onreadystatechange fired'); } } css.onload = function () { alert('CSS onload fired'); } return false; } var js; function include_js(file) { var html_doc = document.getElementsByTagName('head')[0]; js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', file); html_doc.appendChild(js); js.onreadystatechange = function () { if (js.readyState == 'complete') { alert('JS onreadystate fired'); } } js.onload = function () { alert('JS onload fired'); } return false; } </script> </head> <body> <h1>javascript includes testing - testing readyState and onload</h1> This is a test file, part of the second follow up to the "<strong>javascript includes</strong>" article. <br /> To see the article, <a href="http://www.phpied.com/javascript-include">click here</a>. To see the follow-up article, <a href="http://www.phpied.com/javascript-include-ready">click here</a>. To see the second follow-up article, <a href="http://www.phpied.com/javascript-include-ready-onload">click here</a>. <p> </p> <ul> <li style="cursor: pointer" οnclick="include_css('1.css')">Click to load 1.css</li> <li style="cursor: pointer" οnclick="include_js('jsalert.js')">Click to load jsready.js</li> </ul> </body> </html> <pre> [/code]

转载于:https://www.cnblogs.com/woaic/p/3942922.html

你可能感兴趣的文章