ajax加载html文件并执行其中的js代码，加载css样式

ゞ浴缸里的玫瑰 2022-01-16 11:47 272阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

function callback(res)\{

var node = document.createElement('div');

node.innerHTML = res;

document.body.appendChild(node);

var scriptNodes = node.getElementsByTagName('script');

var len = scriptNodes.length;

var styleNodes = node.getElementsByTagName('style');

var len1 = scriptNodes.length;

for(var i=0; i<len; i++)\{

var scriptNode = document.createElement('script');

if(scriptNodes\[0\].getAttribute('src')!='' && scriptNodes\[0\].getAttribute('src')!=null)\{

scriptNode.setAttribute('src',scriptNodes\[0\].getAttribute('src'));

\}else\{

scriptNode.innerHTML = scriptNodes\[0\].innerHTML;

\}

document.body.appendChild(scriptNode);

node.removeChild(scriptNodes\[0\]);

\}

for(var i=0; i<len1; i++)\{

var styleNode = document.createElement('style');

if(styleNodes\[0\].getAttribute('src')!='' && styleNodes\[0\].getAttribute('src')!=null)\{

styleNode.setAttribute('src',styleNodes\[0\].getAttribute('src'));

\}else\{

styleNode.innerHTML = styleNodes\[0\].innerHTML;

\}

document.head.appendChild(styleNode);

node.removeChild(styleNodes\[0\]);

\}

\}

var xhr = null;

if(window.XMLHttpRequest)\{

xhr = new XMLHttpRequest();

\}else if(window.ActiveXObject)\{

xhr = new ActiveXObject("Microsoft.XMLHTTP")

\}

xhr.onreadystatechange = function()\{

if(xhr.readyState == 4)\{

if(xhr.status == 200)\{

callback(xhr.responseText);

\}

\}

\}

xhr.open('get', 'main.html');

xhr.send(null);

转载于:https://my.oschina.net/u/1992917/blog/400009

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/9a50d7b49e124332af260d01eb2aada1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关 html动态加载js文件

一共有三种方法： 1.jquery方法：源码： var headTag = document.getElementsByTagName('head')[0];

「爱情、让人受尽委屈。」/ 2022年09月26日 12:57/ 0 赞/ 614 阅读

相关 JS 动态加载 CSS 文件和JS文件,加载图片

实现功能的js代码。 var dynamicLoading = { css: function(path){ if(!pat

待我称王封你为后i/ 2022年08月14日 05:48/ 0 赞/ 281 阅读

相关 html、css、js文件加载顺序及执行情况

　　今天看书，看到html，css，js加载执行情况，发现自己并不是真正的了解，网上搜了半小时依然未弄明白，就在这时我找到了让我恍然大悟的一段话，如下：　　HTML页面加载

待我称王封你为后i/ 2022年07月11日 23:56/ 0 赞/ 144 阅读

相关 Yii 加载js,加载css，删除js,删除css,js文件管理,css文件管理

1,加载js $cs = Yii::app()->getClientScript(); $cs->registerCoreScript('jquery');

超、凢脫俗/ 2022年06月10日 02:56/ 0 赞/ 261 阅读

相关 WebView加载html代码并附加css,js

WebView踩坑 1.WebView的配置 WebSettings settings = wvDetailContent.getSettings();

柔情只为你懂/ 2022年06月05日 06:47/ 0 赞/ 261 阅读

相关 html，js，css加载顺序

1.首先要了解页面的结构（包含哪些元素？哪些计算机语言能够在页面中运行）（1）html 不仅可以包含文字，还可以包含图片、链接，甚至音乐、程序等非文字

淡淡的烟草味﹌/ 2022年05月10日 08:26/ 0 赞/ 248 阅读

相关 HTML、CSS、JS文件加载顺序及执行情况

HTML页面加载和解析流程 1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。 2. 浏览器开始载入htm

电玩女神/ 2022年03月09日 16:00/ 0 赞/ 276 阅读

相关 html、js和css的加载和执行顺序

1）js加载后立即执行； 2）js执行时会阻塞页面后续的内容（包括页面的渲染和其他资源的下载）。原因：因为浏览器需要一个稳定的dom树结构，而js中很可能有代码直接改变

小鱼儿/ 2022年02月15日 04:53/ 1 赞/ 450 阅读

相关 ajax加载html文件并执行其中的js代码，加载css样式

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] function callback(res)\{ va

ゞ浴缸里的玫瑰/ 2022年01月16日 11:47/ 0 赞/ 273 阅读

相关 html,css,js加载顺序

1.`js`放在`head`中会立即执行，阻塞后续的资源下载与执行。因为`js`有可能会修改`dom`，如果不阻塞后续的资源下载，`dom`的操作顺序不可控。正常的网页加载

一时失言乱红尘/ 2021年06月26日 16:06/ 0 赞/ 498 阅读