1. 程式人生 > >load()方法---------jQuery動態載入html

load()方法---------jQuery動態載入html

  • 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" 請求遵守同源策略;請求無法從不同的域、子域或協議成功地取回資料。