tải chuỗi HTML vào jQuery mà không yêu cầu hình ảnh

Question

Có cách nào để tải chuỗi HTML chứa thẻ hình ảnh vào jQuery mà không yêu cầu hình ảnh không? Tôi muốn có thể chạy các bộ chọn trên đối tượng jQuery để trích xuất một số thông tin. Lấy ví dụ sau:

var string = $('<p><img src="http://image.url/file.jpg" /></p>'); 
string.find('img'); 

Trình duyệt sẽ yêu cầu http://image.url/file.jpg. Tôi đang cố gắng tìm một cách để làm tương tự nhưng không có trình duyệt đưa ra yêu cầu cho hình ảnh.

Cảm ơn

Answer 1

Bạn cần phải rõ ràng về ranh giới câu hỏi của mình. Nếu câu hỏi của bạn là: "Có cách nào bạn có thể tải chính xác HTML đó (không thay đổi nó) thành đối tượng jQuery (giống như bạn đang làm) mà không làm ảnh tải", thì câu trả lời là KHÔNG. jQuery tạo đối tượng cha mẹ tạm thời và gán HTML của bạn cho thuộc tính innerHTML làm cho trình duyệt phân tích cú pháp hoàn toàn HTML này sẽ tải các URL hình ảnh.

Vì vậy, nếu bạn muốn chạy hoạt động selector trên HTML này mà không cần tải những hình ảnh, bạn có nhiều lựa chọn:

1. Sửa đổi các thẻ hình ảnh trước khi đưa ra HTML để jQuery để .src tài sản của họ đã mất hết hoặc trống hoặc các thẻ <img> không phải là thẻ hình ảnh hoặc không còn tồn tại nữa.

2. Sử dụng thứ gì đó khác với loại jQuery này để phân tích cú pháp HTML của bạn để chuẩn bị cho hoạt động chọn.

Nếu bạn tiết lộ thêm một chút về lý do bạn đang cố gắng thực hiện điều này hoặc những gì bạn đang cố gắng thực hiện với thao tác chọn, chúng tôi có thể đề xuất nhiều lựa chọn thay thế hơn.

Answer 2

Bạn có thể thêm đường dẫn ảnh để thuộc tính khác, như thế này

<img id="imgid" src="" data-src="/path_to_image"> 

và sau đó bạn có thể thay thế thuộc tính src với data-src khi bạn cần. Một cái gì đó như thế này

$('#imgid').attr('src',$('#imgid').attr('data-src')); 

Answer 3

Bạn có thể sử dụng một tài liệu XML để thực hiện tìm kiếm:

function searchXml(xmlStr, selector) { 
    var parser, xmlDoc; 
    if(window.DOMParser) { 
     parser = new DOMParser(); 
     xmlDoc = parser.parseFromString(xmlStr, "text/xml"); 
    } else { 
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
     xmlDoc.async = false; 
     xmlDoc.loadXML(xmlStr); 
    } 
    return $(xmlDoc).find(selector); 
} 

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));​​​​ 

Nhìn thấy nó trong hành động: http://jsfiddle.net/na9Tt/

Hãy ghi nhớ nó là một tài liệu XML, không phải là một HTML tài liệu, vì vậy một số loại tìm kiếm cụ thể dành riêng cho HTML có thể không hoạt động chính xác theo cùng một cách.

Answer 4

Đây là Chrome chỉ theo tôi biết, đã tìm thấy nó here, phương pháp đầu tiên trên trang đó có thể không hoạt động nếu chuỗi không phải là HTML hợp lệ, phương thức thứ hai hoạt động tốt. Không tạo yêu cầu cho hình ảnh và không cố gắng thực thi các tập lệnh nội tuyến (điều này hoàn hảo cho trường hợp sử dụng của tôi - các tác vụ nền của tiện ích Chrome).

var doc = document.implementation.createHTMLDocument(""); 
doc.body.innerHTML = htmlString;