मैं डेटा यूआरआई का उपयोग करने से बचने की कोशिश कर रहा हूं क्योंकि मैं नहीं चाहता कि उत्पन्न दस्तावेज़ ब्राउज़र के इतिहास में संग्रहीत किया जाए। क्या पूरे HTML दस्तावेज़ को जगह में बदलना संभव है?पूरे एचटीएमएल दस्तावेज़ को जगह में बदलें
मैंने jQuery("html").html("<html>....</html>") की कोशिश की, लेकिन style जानकारी जीवित नहीं है।
आप शायद ऐसा करना चाहते हैं:
jQuery("body").html("new content");
... जहां "new content" आदर्श केवल मार्कअप कि सामान्य रूप से body तत्व और नहीं बाकी के भीतर प्रकट होता भी शामिल होगा। यह शरीर तत्व की सामग्री को प्रतिस्थापित करेगा, जबकि आपके पास head (स्टाइल शीट जानकारी की तरह) में कुछ भी छोड़ना होगा। तुम भी शीर्षक को अपडेट करना चाहते हैं, तो आप कि document.title = "new title"; के माध्यम से
संपादित मैं, html तत्व के अंदर सब कुछ की जगह चाहे वह काम करेगा के बारे में सोच को मिला कर सकते हैं, और क्या होगा। तो मैं इस किया था:
<!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>
और परिणाम काफी रोचक थे — मैं एक डोम संरचना है कि एक head या bodyसभी पर, बस head और body के वंशज के साथ html नहीं है के साथ खत्म के भीतर। यह शायद नई सामग्री में (नई) स्टाइल को गड़बड़ कर रहा है। मुझे अनिवार्य रूप से एक ही परिणाम innerHTML सेटिंग (जो हो सकता है कि यह jQuery में काम नहीं करता है; jQuery innerHTML का उपयोग करता है, हालांकि यह ऐसा करने के बारे में बहुत परिष्कृत है जब यह नहीं कर सकता है); जबकि अगर मैं और body तत्वों को document.createElement और document.appendChild के माध्यम से स्पष्ट रूप से बनाकर कुछ ऐसा करता हूं, तो यह काम करता है।
जिनमें से सभी का लगभग निश्चित रूप से मतलब है कि यह इसके लायक से अधिक प्रयास है।
लेकिन: ध्यान दें कि head और body तत्वों की सामग्री बदलते ठीक काम करने के लिए लगता है:
<!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>
तो अगर आप को अलग "पेज" आप सिर और शरीर के भागों में लोड कर रहे हैं , आप इसे आसानी से स्थान पर अपडेट कर सकते हैं।
इसलिए नया
टैग लोड करना संभव नहीं है? – james@james: यह * संभव हो सकता है, लेकिन यदि आप करते हैं, तो आपको यह सुनिश्चित करना होगा कि इसमें सबकुछ है जिसमें आप अभी भी चाहते हैं (स्टाइल शीट संदर्भों की तरह)। आपको शायद स्क्रिप्ट टैग बनाए रखने की चिंता करने की आवश्यकता नहीं है; एक बार स्क्रिप्ट लोड और मूल्यांकन हो जाने के बाद, यह अब उस तत्व से बंधे नहीं है जिसने इसे बनाया है और तत्व को हटाने से स्क्रिप्ट पर कोई प्रभाव नहीं पड़ता है। –
मैं ध्यान दूंगा (बहुत बेल्ट, हाँ), कि सिर में भारी जेएस की उपस्थिति (उदाहरण के लिए ऑप्टिमाइज़ली या एनसाइटिन के माध्यम से), केवल शरीर को अस्थिर करने की जगह भी बना सकती है। –
कोई jQuery:
var newString = [
"<!doctype html>"
, "<html>"
, "<head>"
, "</head>"
, "<body>"
, "<h1>new content</h1>"
, "</body>"
, "</html>"
].join("");
document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;
मैं अपने बयान से उलझन में हूँ "शैली जानकारी जीवित रहने नहीं है", शैली से लिंक किया जाएगा, या शामिल दस्तावेज़ में, इसलिए यदि आप पूरे दस्तावेज़ की जगह क्या तुम करोगी शैलियों को खोने की उम्मीद है? क्या आपको वास्तव में/पूरे/दस्तावेज़ को प्रतिस्थापित करने की आवश्यकता है? आगंतुकों के दृष्टिकोण से आप क्या हासिल करने की कोशिश कर रहे हैं? –
क्षमा करें, मेरा मतलब है कि * नई * शैली की जानकारी, .html ("... ..."), जीवित नहीं है। – james
मुझे एहसास नहीं हुआ कि आप * नई * स्टाइल जानकारी के बारे में बात कर रहे थे। उस टिप्पणी ने मुझे आश्चर्यचकित कर दिया; मैंने अपना जवाब थोड़ा सा अपडेट कर लिया है। –