jquery中使用load加载外部html文件，不执行JavaScript的解决办法

最新推荐文章于 2022-12-13 10:01:54 发布
最新推荐文章于 2022-12-13 10:01:54 发布
阅读量658 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery 文章标签： jquery load external html file 外部文件 javaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_3142/article/details/82550297
本文介绍使用jQuery load加载外部HTML文件时JavaScript不执行的问题及解决方案。推荐使用$.get方法加载外部页面，并将Script部分手动追加到目标元素中。

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

最近自己在写jquery的扩展插件

遇到个问题就是，使用load加载外部的html文件，但是加载了想要加载的内容之后，发现JavaScript不执行，并没有加载进来，上网看了看解决办法

找到答案如下

load加载的外部文件会把Script部分删除掉

所以推荐使用$.get来异步加载外部页面，具体代码如下


$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');


可在这里看例子
[url]http://plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview[/url]

参看
[url]http://stackoverflow.com/questions/16352371/jquery-load-ajax-not-executing-javascript-in-returned-html-after-appende[/url]
用Jquery.load载入页面
PS101505138的专栏
05-06 1882
因为开始不懂Jquery，一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现载入进来的页面与原来单独的页面不一样，样式没了，后来在网上查了一下，发现了解决办法，这是别人的回答：  是这样的，如果不过滤掉一些内容的话，直接加载，会使页面混乱的，比如新的页面也存在标签，加载进来后，一个页面就会存在两个标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一
JS异步加载，JQ事件不被执行解决方法
dcujcivw769565的博客
07-20 316
一，在我们实现动态生成HTML代码时会出现，使用JQ方法会不被执行，解决方法，如下：使用jquery的委托事件，将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con...
使用jquery的load方法加载html页面，但是html引入的js不生效
热门推荐
monkeyfly学前端
10-24 6万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 有一个公共的登录弹框页面需要在多个页面引用，百度后就使用了jQuery 的 load 方法。 做法： 将公共的 html 页面提取出来，放在一个独立的 HTML 文件中。 然后在需要使用的 html 页面中，使用 jQuery 的 load 方法进行引用即可。 注：提取的部分，不需要包含多余的&amp;amp;amp;lt;head&amp;amp;amp;g...
jquery load html片段,jQuery .load（）调用未在加载的HTML文件中执行JavaScript
weixin_30046717的博客
06-21 191
小编典典您正在将整个HTML页面加载到div中，包括html，head和body标签。如果您执行加载并且仅在加载的HTML中包含打开脚本，关闭脚本和JavaScript代码，会发生什么情况？这是驱动程序页面：jQuery Load of Scriptgoogle.load("jquery", "1.3.2");$(document).ready(function(){$("#myButton")....
使用jquery的load方法加载html页面，被引入的html中的js失效解决办法
weixin_44655113的博客
01-29 1161
解决办法: <html> ......... <body> <div id="linka"></div> </body> <script> ......... $("#linka").load
jquery关于load()加载页面遇见的坑(js代码使用不了)
wordgg的博客
01-16 2万+
      今天在项目上遇到一个奇怪的问题，使用jquery的load()异步加载页面。发现页面的js不能使用。几番尝试终于解决了问题。解决思路就是在load（）加载完成后，在去加载该页面的js。代码如下：...
如何动态加载外部Javascript文件
10-23
动态加载外部JavaScript文件是一种常用的技术手段，它允许在不重新加载整个页面的情况下，动态地将JavaScript文件添加到网页中。这对于提高页面加载速度、按需加载资源、减少初始加载时间等方面非常有效。 在介绍...
load.js：动态加载外部JavaScript和CSS文件
01-28
动态加载外部JavaScript和CSS文件 安装 npm install load.js 如何使用？ const load = require ( 'load' ) ; /* you could use jquery functions here */ await load . js ( 'jquery.js' ) ; /* load menu css and...
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
10-20
【jQuery的load方法及其应用】 在网页开发中，动态加载内容是...通过上述方法，我们可以利用jQuery的load方法实现动态加载内容，同时解决被加载页面JavaScript失效的问题，使得后台系统的页面布局和交互更加灵活高效。
jquery及js实现动态加载js文件的方法
10-22
如果不使用jQuery，也可以通过纯JavaScript实现动态加载JS文件。这涉及到创建一个script元素，设置其src属性为目标JS文件的URL，然后将该script元素添加到文档的body中。同时，为了能够检测脚本加载的状态，通常需要...
jquery的load()方法加载html后javascript失效解决方法
yangxiaochen_jk的博客
11-18 1万+
如果你的事件是直接绑定到按钮上的话，那么当你重新load之后，按钮就不是原来的按钮了。 所以，你绑定到原来按钮上的事件，也不会出现在这个新的按钮上了。 所以，这个时候，就要给新的按钮重新绑定事件，或者使用事件委托，直接 把事件绑定到不变的元素上。 JavaScript code ? 1 2 3 4 5 6
jquery追加的html无法触发js,解决jquery中动态新增的元素节点无法触发事件问题的两种方法...
weixin_33291684的博客
06-03 757
比如做一个ajax读取留言列表的时候，每条留言后面有个回复按钮，class为“reply”,如果你用的是$(".reply").click(function(){ //do something... })，想必后面通过ajax加载进来的列表中的回复按钮，点击事件会失效。其实最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事...
jquery实现外静态html文件的引入---即：include嵌入效果
Oranq的博客
03-24 2567
建立footer.html，内容为要嵌入的内容。   在需要嵌入的页面中加入： script type="text/javascript"> $.get("footer.html",function(data){            $("#foot").html(data); }); 其中foot为嵌入的页面放的位置的外层DIV等。
jquery使用load方法引入外部文件，js不生效的解决方法
h5_since的博客
06-14 2546
$(function(){ //load是异步操作，所以要将getscript放在load的回调函数里， $(".head").load("clone.html .header",function(){ //$.getScript也是异步操作，需要将在getScript生效之后的事件放在getScript的回调函数里 $.getScript("js/details-head.js"...
JQ load 引入JS不生效
Mr-k的博客
12-13 796
JQ load 引入JS无效
jQuery加载html文档的几种方法
qq_39010381的博客
07-03 1810
>   html>     head>       title>init.htmltitle>              meta http-equiv="keywords" content="keyword1,keyword2,keyword3">       meta http-equiv="description" content="this is my page">     
解决jquery load加载JS失效问题
soos的博客
12-23 1万+
一般我们如果想在一个界面中显示另一个界面的内容通常使用load加载，但是load加载也有一定的弊端，对于静态的界面没有其他特殊js效果的界面用load加载是ok的，但是如果界面本身有js作用，那么在通过load加载到两一个界面是，此界面原本具有的js效果就会出现显示无效的情况，针对这一情况，让被加载的界面通过加载进inframe再显示就很好的解决了load加载js无效的问题。 部分js代码如下：
Android 使用Jpush实现信息推送
lovoo的博客
05-16 814
使用Jpush实现信息推送
jQuery 中load方法加载页面后css文件和js文件失效，怎么解决这个问题
最新发布
09-19
jQuery 的 `load()` 方法用于异步加载外部 HTML 并插入到目标元素中，如果直接加载可能会导致样式表（CSS）和脚本（JavaScript）文件未正确关联。为了解决这个问题，可以采取以下几种策略： 1. **修改 `src` 或 `href`**： 当 `load()` 加载 HTML 时，确保将 CSS 和 JavaScript 文件的 `src` 或 `href` 属性也一起包含在内。例如，在 `load()` 函数内部，你可以添加类似这样的代码： ```javascript $('#target').load('page.html', function() { $('head').append('<link rel="stylesheet" type="text/css" href="styles.css">'); $('body').append('<script src="script.js"></script>'); }); ``` 2. **使用 `async` 和 `defer` 标签**： 对于外部 JS 文件，可以在 `script` 标签中设置 `async` 或 `defer`属性，以确保它们按需下载而不是阻塞页面加载： ```html <script async src="script.js"></script> ``` 3. **延迟样式加载**： 使用现代浏览器支持的 `link[rel=preload]` 或者 `link[rel=stylesheet][async]` 来延迟 CSS 文件的加载。 4. **使用 `$.getScript()` 或 `$.ajax()` 获取 JS**： 如果需要单独处理脚本加载，可以使用 jQuery 的 `$.getScript()` 或 `$.ajax({dataType: 'script'})` 方法，这样能更好地控制脚本加载。 5. **HTML5 History API 和 PushState**： 对于更复杂的单页应用，可以考虑使用 History API 管理 URL 变化，并通过事件监听器来更新内容和资源引用。 总之，确保链接的路径正确，采用异步加载机制，并根据需求调整加载顺序和时机，通常能解决 CSS 和 JS 文件加载失效的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值