load()方法---------jQuery动态加载html

本文详细介绍了jQuery的load()方法,用于动态加载HTML内容。内容包括:load()方法如何处理完整页面和部分页面的加载,加载内容如何与容器页面的CSS样式和JavaScript共存,以及同源策略的限制。通过示例展示了如何加载指定ID的部分内容。

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

我的个人德州扑克项目https://github.com/mingzijian/pokers,欢迎给星星。
  • jquery代码
  • $("#div").load("test.html"); 
  •  
    •  

test.html   ----------------被加载页面(有<HTML><HEAD><META><BODY>等的完整页面 )
$("#div")所在页面----------------------------容器页面(也是完整页面)

  • 1、被加载页面      可以使用     自己页面的CSS样式

 

  • 2、被加载页面      可以使用     容器页面的CSS样式,当自己页面css样式和容器页面的CSS样式冲突时,自己页面的css样式起作用!

 

    • 3、被加载页面

能使用     自己页面的javascript

    • 4、被加载页面

能使用     容器页面的javascript,当自己页面javascript和容器页面的javascript冲突时,都起作用,形成“冒泡”;

  • 5、     容器页面的head里面的   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> )     对      被加载页面      无效

 

  • 6、 被加载页面的head里面的   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> )     对      被加载页面      无效



  • 7、被加载页面的字符编码只能是UTF-8
  • jquery代码
  • load() 方法允许加载html文档的一部分,语法如下:
  • $("#div").load("test.html #content");  
  • test.html    #content(中间有一个空格)  ----------------被加载页面的id是content的部分

 

  • 加载html文档的一部分的情况有所不同(自己页面的css样式和javascript都丢失,能使用容器页面的css样式和javascript),

 

  • 不过都是按照下面做法实现的,可以根据   把html文件加载到容器页面形成的文档情况   而定

 

  • w3cshcool说load() 方法是这样实现的:
  • jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,

 

  • 比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

 

    • 注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

转载于:https://www.cnblogs.com/lixiaoran/p/6251397.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值