Tôi đang cố tránh sử dụng URI dữ liệu vì tôi không muốn tài liệu được tạo sẽ được lưu trữ trong lịch sử của trình duyệt. Có thể thay thế toàn bộ tài liệu HTML tại chỗ không?Thay thế toàn bộ tài liệu HTML tại chỗ
Tôi đã thử jQuery("html").html("<html>....</html>"), nhưng thông tin style không tồn tại.
Bạn có thể muốn làm điều này:
jQuery("body").html("new content");
... nơi "new content" sẽ lý tưởng chỉ bao gồm các đánh dấu mà thông thường sẽ xuất hiện trong body yếu tố và không phải là nghỉ ngơi. Điều đó sẽ thay thế các nội dung của phần tử cơ thể, trong khi để lại bất cứ thứ gì bạn có trong head (như thông tin về tờ kiểu dáng) một mình. Nếu bạn cũng muốn cập nhật tiêu đề, bạn có thể làm điều đó thông qua document.title = "new title";
Sửa tôi đã tự hỏi về thay thế mọi thứ bên trong phần tử html, cho dù đó có thể làm việc, và những gì sẽ xảy ra. Vì vậy, tôi đã làm điều này:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
font-weight: bold;
color: blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnChange').live('click', changePage);
$('#btnHiThere').live('click', sayHi);
}
function changePage() {
$('html').html(
"<head><\/head>" +
"<body>" +
"<input type='button' id='btnHiThere' value='Click for Alert'>" +
"<p>Note how this text now looks.<\/p>" +
"<\/body>"
);
}
function sayHi() {
alert("Hi there");
}
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>
Và kết quả khá thú vị — tôi kết thúc với một cấu trúc DOM mà không có một head hoặc bodyở tất cả, chỉ html với hậu duệ của head và body phía trong. Đây có lẽ là điều làm rối loạn phong cách (mới) trong nội dung mới. Về cơ bản, tôi có được kết quả tương tự như thiết lập innerHTML trực tiếp (có thể là lý do tại sao nó không hoạt động trong jQuery; jQuery sử dụng innerHTML khi có thể, mặc dù nó rất tinh vi về việc không làm như vậy khi không thể); trong khi nếu tôi làm điều gì đó tương tự bằng cách tạo rõ ràng các yếu tố head và body qua document.createElement và document.appendChild, nó hoạt động.
Tất cả điều này gần như chắc chắn có nghĩa là đây là nỗ lực nhiều hơn giá trị của nó.
Nhưng: Lưu ý rằng việc thay đổi nội dung trong những yếu tố head và body dường như chỉ làm việc tốt:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
font-weight: bold;
color: blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnChange').live('click', changePage);
$('#btnHiThere').live('click', sayHi);
}
function changePage() {
$('head').html(
"<style type='text/css'>\n" +
"body { color: green; }\n" +
"<\/style>\n"
);
$('body').html(
"<input type='button' id='btnHiThere' value='Click for Alert'>" +
"<p>Note how this text now looks.<\/p>"
);
}
function sayHi() {
alert("Hi there");
}
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>
Vì vậy, nếu bạn tách các "trang" bạn đang tải vào đầu và bộ phận cơ thể , bạn có thể dễ dàng cập nhật nó tại chỗ.
để không thể tải thẻ
mới? – james@james: Nó * có thể * là có thể, nhưng nếu bạn làm, bạn sẽ cần phải chắc chắn rằng nó có tất cả mọi thứ trong nó bạn muốn vẫn có (như tài liệu tham khảo phong cách trang). Bạn có thể không phải lo lắng về việc duy trì các thẻ script; một khi kịch bản đã được tải và đánh giá, nó không còn bị ràng buộc với phần tử đã tạo ra nó và loại bỏ phần tử đó không có tác dụng trên tập lệnh. –
Tôi sẽ lưu ý (nhiều belated, có), rằng sự hiện diện của JS nặng trong đầu (thông qua Optimizely hoặc Ensighten, ví dụ), có thể làm cho thậm chí thay thế chỉ là cơ thể untenable. –
Không jquery:
var newString = [
"<!doctype html>"
, "<html>"
, "<head>"
, "</head>"
, "<body>"
, "<h1>new content</h1>"
, "</body>"
, "</html>"
].join("");
document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;
Tôi đang bối rối bởi tuyên bố của bạn "thông tin phong cách không tồn tại", phong cách sẽ được liên kết với, hoặc bao gồm trong tài liệu, vì vậy nếu bạn thay thế toàn bộ tài liệu bạn sẽ mong đợi các phong cách bị lạc? Bạn có thực sự cần phải thay thế/toàn bộ/tài liệu không? Bạn đang cố gắng đạt được gì từ quan điểm của khách truy cập? –
xin lỗi, tôi có nghĩa là thông tin kiểu * mới *, .html ("... ..."), không tồn tại. – james
Tôi không nhận ra bạn đang nói về thông tin kiểu * mới *. Nhận xét đó khiến tôi băn khoăn; Tôi đã cập nhật câu trả lời của tôi một chút. –