স্ট্রিং হিসাবে কীভাবে পুরো ডকুমেন্ট এইচটিএমএল পাবেন?

236

স্ট্রিং হিসাবে, এইচটিএমএল ট্যাগগুলির মধ্যে পুরো এইচটিএমএল পাওয়ার কোনও উপায় কি জেএসে রয়েছে?

document.documentElement.??
javascript  html  document  tostring 
— TheFlash
সূত্র
10
শুধুমাত্র সঠিক উত্তর: stackoverflow.com/questions/817218/... ( আপ-ভোট বন্ধ ভেতরের / outerHTML উত্তর, তারা সমগ্র উৎস করবেন না! )
— জন
2
document.body.parentElement.innerHTML
— রেডউল্ফ প্রোগ্রামগুলি
@ জন তারা কি জোগায় না?
— নীলজাইকে

উত্তর:

319

এমএস কিছু সময় আগে outerHTMLএবং innerHTMLবৈশিষ্ট্যগুলি যুক্ত করেছে ।

এমডিএন অনুসারে , outerHTMLফায়ারফক্স ১১, ক্রোম ০.২, ইন্টারনেট এক্সপ্লোরার ৪.০, অপেরা 7, সাফারি ১.৩, অ্যান্ড্রয়েড, ফায়ারফক্স মোবাইল ১১, আইই মোবাইল, অপেরা মোবাইল এবং সাফারি মোবাইল সমর্থিত। outerHTMLহয় করে DOM পার্সিং এবং ধারাবাহিকতাতে নির্দিষ্টকরণ।

আপনার জন্য কী কাজ করবে তার জন্য ব্রাউজারের সামঞ্জস্যের জন্য quirksmode দেখুন । সমস্ত সমর্থন innerHTML।

var markup = document.documentElement.innerHTML;
alert(markup);
— কলিন বার্নেট
সূত্র
28
আউটআর এইচটিএমএল ডক্টিপ পায় না।
— সিএমসিডিগ্রাগনকাই
2
মোহন মত কাজ! ধন্যবাদ! জেএস এবং সিএসএস ফাইল সহ নথির সাথে লিঙ্কযুক্ত কোনও / সমস্ত ফাইলের আকার পাওয়ার কোনও উপায় আছে কি?
— www139
@ সিএমসিডিগ্রাগনকাই: আপনি আলাদাভাবে ডকটাইপটি পেতে এবং এটি মার্কআপ স্ট্রিংয়ে প্রিপেন্ড করতে পারেন । আদর্শ নয়, আমি জানি, তবে সম্ভব।
— মাইক ব্রান্সকি
76

আপনি করতে পারেন

new XMLSerializer().serializeToString(document)

আই 9 এর চেয়েও নতুন ব্রাউজারগুলিতে

Https://caniuse.com/#feat=xML-serializer দেখুন

— এরিক অ্যাগনার
সূত্র
5
তারিখ / সময় স্ট্যাম্প অনুসারে এটি প্রথম সঠিক উত্তর ছিল । এক্সএমএল ঘোষণার মতো পৃষ্ঠার অংশগুলি অন্তর্ভুক্ত করা হবে না এবং অন্যান্য "উত্তরগুলি" ব্যবহার করার সময় ব্রাউজারগুলি কোডটি ম্যানিপুলেট করে। এটিই একমাত্র পোস্ট যা আপ-ভোট করা উচিত (তিন দিনের পরে ডস পোস্ট করা হবে)। মানুষের নজর দেওয়া দরকার!
— জন
2
এটি সম্পূর্ণরূপে সঠিক নয় কারণ এটি সিরিয়ালাইজড টোস্ট্রিং একটি এইচটিএমএল এনকোড সম্পাদন করে। উদাহরণস্বরূপ, যদি আপনার কোডগুলিতে "টাইমস নিউ রোমান", টাইমসের মতো ফন্টগুলি সংজ্ঞায়িত করার শৈলী থাকে তবে সেরিফের উদ্ধৃতিগুলি এইচটিএমএল এনকোডযুক্ত হবে। সম্ভবত এটি আপনার কারও পক্ষে গুরুত্বপূর্ণ নয় তবে আমার কাছে তা ...
— মার্কো
3
@ জন ভাল জানেন ওপি আসলে " এইচটিএমএল ট্যাগের মধ্যে পুরো এইচটিএমএল" জন্য জিজ্ঞাসা করে । এবং কলিন বার্নেটের নির্বাচিত সেরা উত্তর এটি অর্জন করে। এই নির্দিষ্ট উত্তরের (এরিকের) মধ্যে এইচটিএমএল ট্যাগ এবং ডক্টাইপ অন্তর্ভুক্ত থাকবে। এটি বলেছিল, এটি আমার কাছে মোটামুটি একটি হীরা ছিল এবং ঠিক আমি যা খুঁজছিলাম! আপনার মন্তব্যটিও সহায়তা করেছে কারণ এটি আমাকে এই উত্তরটির সাথে আরও বেশি সময় ব্যয় করেছে, তাই ধন্যবাদ :)
— প্রচারক
2
আমি মনে করি লোকেদের এটির সাথে সাবধান হওয়া উচিত, বিশেষত কারণ এটি এমন কোনও মান দেয় যা আপনার ব্রাউজারটি প্রাপ্ত প্রকৃত এইচটিএমএল নয়। আমার ক্ষেত্রে এটি htmlট্যাগটিতে এমন বৈশিষ্ট্য যুক্ত করেছে যা সার্ভারটি আসলে কখনও পাঠায়নি :(
— ওনাসার
1
এটি প্রতিটি ব্রাউজারে সমর্থিত। এই দরিদ্র ব্রাউজার সমর্থন কীভাবে?
— এরিক অ্যাগনার
44

আমি বিশ্বাস করি আপনার পক্ষে document.documentElement.outerHTMLএটি ফিরিয়ে দেওয়া উচিত।

এমডিএন অনুসারে , outerHTMLফায়ারফক্স ১১, ক্রোম ০.২, ইন্টারনেট এক্সপ্লোরার ৪.০, অপেরা 7, সাফারি ১.৩, অ্যান্ড্রয়েড, ফায়ারফক্স মোবাইল ১১, আইই মোবাইল, অপেরা মোবাইল এবং সাফারি মোবাইল সমর্থিত। outerHTMLহয় করে DOM পার্সিং এবং ধারাবাহিকতাতে নির্দিষ্টকরণ।

outerHTMLসম্পত্তির এমএসডিএন পৃষ্ঠা নোট করে যে এটি IE 5+ এ সমর্থিত। কলিনের উত্তর ডাব্লু 3 সি কির্কস্মোড পৃষ্ঠায় লিঙ্ক করে, যা ক্রস ব্রাউজারের সামঞ্জস্যতার (অন্যান্য ডিওএম বৈশিষ্ট্যগুলির জন্যও) ভাল তুলনা করে।

— Noldorin
সূত্র
সমস্ত ব্রাউজার এটি সমর্থন করে না।
— কলিন বারনেট
@ কলিন: হ্যাঁ, ভাল কথা। অভিজ্ঞতা থেকে, আমি মনে করি মনে হয় যে আইই 6+ এবং ফায়ারফক্স উভয়ই এটি সমর্থন করে, যদিও আপনি লিঙ্কিত কুইর্কমোড পৃষ্ঠাটি অন্যথায় প্রস্তাব দেয় ...
— নলডোরিন
ফায়ারফক্স আউটারএইচটিএমএল সমর্থন করে না। এটি আইপি মালিকানাধীন। বিকাশকারী.মোজিলা.অর্গ
— এএন /
4
ডক্টাইপ এবং এইচটিএমএল ট্যাগ সহ সমস্ত কিছু পাওয়ার কী উপায় আছে?
— trusktr
1
আমার প্রথম ছিল, আসলে। : পি
— নলডোরিন
40

আমি কি ফিরে এসেছে তা দেখতে বিভিন্ন উত্তর চেষ্টা করেছিলাম। আমি ক্রোমের সর্বশেষতম সংস্করণ ব্যবহার করছি।

পরামর্শ document.documentElement.innerHTML;ফিরে এসেছিল<head> ... </body>

গ্যাবির পরামর্শ document.getElementsByTagName('html')[0].innerHTML;একই ফিরে আসল।

প্রস্তাবটি document.documentElement.outerHTML;ফিরে এসেছিল <html><head> ... </body></html> যা 'ডক্টিপাইপ' থেকে আলাদা।

আপনি ডক্টাইপ অবজেক্টের সাথে document.doctype; এটি পুনরুদ্ধার করতে পারবেন এটি কোনও স্ট্রিং নয়, কোনও বস্তুটি ফেরত দেয়, সুতরাং আপনার এখানে HTML5 সহ সমস্ত ডকুমেন্টের জন্য স্ট্রিং হিসাবে বিশদগুলি বের করার প্রয়োজন হলে এটি বর্ণিত হয়েছে: জাভাস্ক্রিপ্টের সাথে স্ট্রিং হিসাবে কোনও এইচটিএমএল এর ডক্টটাইপ পান

আমি কেবল এইচটিএমএল 5 চেয়েছিলাম, সুতরাং সম্পূর্ণ ডকুমেন্টটি তৈরি করার জন্য নিম্নলিখিতটি আমার পক্ষে যথেষ্ট ছিল:

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

— paulo62
সূত্র
6
এটি সর্বাধিক সম্পূর্ণ উত্তর এবং গ্রহণ করা উচিত। ২০১ of সালের হিসাবে, ব্রাউজারের সামঞ্জস্যতা সম্পূর্ণ, এবং এর সাথে বিশদ উল্লেখ করা (বর্তমানে গৃহীত উত্তরের মতো) আর প্রয়োজন নেই।
— ড্যান ড্যাসকলেসকু
10

আপনি এটি করতে পারেন:

document.getElementsByTagName('html')[0].innerHTML

আপনি ডকটাইপ বা এইচটিএমএল ট্যাগ পাবেন না, তবে সমস্ত কিছু ...

— Hakan
সূত্র
5 
document.documentElement.outerHTML
— ব্রায়ান ক্যাম্পবেল
সূত্র
1
সমস্ত ব্রাউজার এটি সমর্থন করে না।
— কলিন বারনেট
2
ফায়ারফক্স 11, ক্রোম 0.2, ইন্টারনেট এক্সপ্লোরার 4.0, অপেরা 7, সাফারি 1.3, অ্যান্ড্রয়েড, ফায়ারফক্স মোবাইল 11, আইই মোবাইল, অপেরা মোবাইল এবং সাফারি মোবাইল ( এমডিএন ) এ সমর্থিত । outerHTMLহয় করে DOM পার্সিং এবং ধারাবাহিকতাতে নির্দিষ্টকরণ।
— এক্সপি
কলিনের উত্তর আরও বিস্তারিত is
— ড্যান ড্যাসক্লেস্কু
4

কেবলমাত্র IE:

>     webBrowser1.DocumentText

1.0 থেকে এফএফের জন্য:

//serialize current DOM-Tree incl. changes/edits to ss-variable
var ns = new XMLSerializer();
var ss= ns.serializeToString(document);
alert(ss.substr(0,300));

এফএফ এ কাজ করতে পারে। (উত্স-পাঠ্যের খুব শুরু থেকে বেশিরভাগ 300 টি অক্ষর দেখায়, বেশিরভাগ ডক্টাইপ-ডিফগুলি))

তবে সচেতন থাকুন যে, এফএফের "" সেভ করুন "-র ডায়ালগটি পৃষ্ঠার বর্তমান অবস্থা সংরক্ষণ করতে পারে না, বরং মূলত লোড হওয়া এক্স / এইচ / টিএমএল-উত্স-পাঠ্য !! (কিছু টেম্প-ফাইলের জন্য এসএস-এর একটি পোষ্ট-আপ এবং এর পূর্বে করা পরিবর্তনগুলি / সম্পাদনাগুলির সাহায্যে সংরক্ষণযোগ্য উত্স-পাঠ্য সরবরাহ করতে পারে to

যদিও এফএফ "পিছনে" ভাল পুনরুদ্ধার এবং " ইনপুট-এর মতো ফিল্ডস, টেক্সারিয়া ইত্যাদির জন্য " সংরক্ষণ করুন (যেমন) ... তে রাষ্ট্র / মানগুলির একটি এনআইসিস অন্তর্ভুক্তির দ্বারা বিস্ময়কর / ডিজাইনের মোডে নয় ...

যদি একটি এক্সএইচটিএমএল-রেস না হয়। এক্সএমএল-ফাইল (মাইম-টাইপ, কেবল ফাইল নাম-এক্সটেনশন নয়!), অ্যাপ্লিকেশনটি সেট করতে কেউ ডকুমেন্ট.ওপেন / রাইটিং / ক্লোজ ব্যবহার করতে পারে। উত্স-স্তরে থাকা সামগ্রী, যা এফএফ-এর ফাইল / সেভ মেনু থেকে ব্যবহারকারীর সেভ-ডায়ালগে সংরক্ষণ করা হবে। দেখুন: http://www.w3.org/MarkUp/2004/xhtml-faq# ডকউইট রিসেন্ট।

https://developer.mozilla.org/en-US/docs/Web/API/document.write

এক্স (এইচটি) এমএল এর প্রশ্নের নিরপেক্ষ, যদি একটি আইফ্রেমেস অ্যাক্সেস করতে - (স্ক্রিপ্ট-তৈরি !?) iframe এর src- বৈশিষ্ট্যের মান হিসাবে একটি "ভিউ-উত্স: http: // ..." চেষ্টা করুন এফএফ নথি:

<iframe-elementnode>.contentDocument, অ্যাপলারের জন্য গুগল "এমডিএন কনটেন্ট ডকুমেন্ট" দেখুন। উদাহরণস্বরূপ 'টেক্সট কনটেন্ট' এর মতো সদস্যরা। 'বছর বছর আগে পেয়েছি এবং এর জন্য ক্রল করতে পছন্দ হয় না। যদি এখনও জরুরি প্রয়োজন হয় তবে এটি উল্লেখ করুন, আমি ডুব দিয়েছি ...

— ডস
সূত্র
1

ব্যবহার document.documentElement।

একই প্রশ্নের উত্তর এখানে দেওয়া হয়েছে: https://stackoverflow.com/a/7289396/2164160

— বীর এন
সূত্র
এই প্রশ্নটির এটির চেয়ে বেশি পুরানো একটির সদৃশ হিসাবে খুব সহজেই বন্ধ করা উচিত। যাইহোক, মজার অংশটি হ'ল আপনার প্রয়োজন .outerHTMLএবং পাওয়া উচিত এবং document.doctypeসবচেয়ে সম্পূর্ণ উত্তরটি পাওলোর ।
— ড্যান ড্যাসকলেসকু
1

এর বাইরেও জিনিসগুলি পেতে <html>...</html>, সর্বাধিক গুরুত্বপূর্ণভাবে <!DOCTYPE ...>ঘোষণাপত্রের জন্য, আপনি ডকুমেন্ট.চাইল্ড নোডগুলি দিয়ে প্রতিটি স্ট্রিংয়ে রূপান্তর করতে পারেন:

const html = [...document.childNodes]
    .map(node => nodeToString(node))
    .join('\n') // could use '' instead, but whitespace should not matter.

function nodeToString(node) {
    switch (node.nodeType) {
        case node.ELEMENT_NODE:
            return node.outerHTML
        case node.TEXT_NODE:
            // Text nodes should probably never be encountered, but handling them anyway.
            return node.textContent
        case node.COMMENT_NODE:
            return `<!--${node.textContent}-->`
        case node.DOCUMENT_TYPE_NODE:
            return doctypeToString(node)
        default:
            throw new TypeError(`Unexpected node type: ${node.nodeType}`)
    }
}

আমি এই কোডটি এনপিএম -এ ডকুমেন্ট-আউটhtml হিসাবে প্রকাশ করেছি ।

সম্পাদনা দ্রষ্টব্য উপরের কোড একটি ফাংশন উপর নির্ভর করে doctypeToString; এর বাস্তবায়ন নিম্নরূপ হতে পারে (নীচে কোডটি এনপিএম এ ডক্টাইপ -টু-স্ট্রিং হিসাবে প্রকাশিত হবে ):

function doctypeToString(doctype) {
    if (doctype === null) {
        return ''
    }
    // Checking with instanceof DocumentType might be neater, but how to get a
    // reference to DocumentType without assuming it to be available globally?
    // To play nice with custom DOM implementations, we resort to duck-typing.
    if (!doctype
        || doctype.nodeType !== doctype.DOCUMENT_TYPE_NODE
        || typeof doctype.name !== 'string'
        || typeof doctype.publicId !== 'string'
        || typeof doctype.systemId !== 'string'
    ) {
        throw new TypeError('Expected a DocumentType')
    }
    const doctypeString = `<!DOCTYPE ${doctype.name}`
        + (doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : '')
        + (doctype.systemId
            ? (doctype.publicId ? `` : ` SYSTEM`) + ` "${doctype.systemId}"`
            : ``)
        + `>`
    return doctypeString
}

— Gerben
সূত্র
0

আমার কেবল ডকটাইপ এইচটিএমএল দরকার এবং আইই ১১, এজ এবং ক্রোমে ভাল কাজ করা উচিত। আমি কোডটি নীচে ব্যবহার করেছি এটি কাজ করে।

function downloadPage(element, event) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
        document.execCommand('SaveAs', '1', 'page.html');
        event.preventDefault();
    } else {
        if(isChrome) {
            element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
        }
        element.setAttribute('download', 'page.html');
    }
}

এবং আপনার অ্যাঙ্কর ট্যাগে এটি ব্যবহার করুন।

<a href="#" onclick="downloadPage(this,event);" download>Download entire page.</a>

উদাহরণ

    function downloadPage(element, event) {
    	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    
    	if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
    		document.execCommand('SaveAs', '1', 'page.html');
    		event.preventDefault();
    	} else {
    		if(isChrome) {
                element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
    		}
    		element.setAttribute('download', 'page.html');
    	}
    }
I just need doctype html and should work fine in IE11, Edge and Chrome. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>
<a href="#" onclick="downloadPage(this,event);"  download><h2>Download entire page.</h2></a></p>

<p>Some image here</p>

<p><img src="https://placeimg.com/250/150/animals"/></p>
স্নিপেট প্রসারিত করুন

— kiranvj
সূত্র
0

আমি outerHTMLউপাদানগুলির জন্য (মূল <html>ধারক) এবং XMLSerializerঅন্য যে কোনও কিছুর জন্য <!DOCTYPE>, ধারকটির বাইরে এলোমেলো মন্তব্য <html>, বা অন্য যে কোনও কিছু থাকতে পারে এর জন্য ব্যবহার করছি। দেখে মনে হচ্ছে যে সাদা অংশটি <html>উপাদানটির বাইরে সংরক্ষণ করা হয়নি , তাই আমি ডিফল্টর সাথে নতুন লাইনে যুক্ত করছি sep="\n"।

function get_document_html(sep="\n") {
    let html = "";
    let xml = new XMLSerializer();
    for (let n of document.childNodes) {
        if (n.nodeType == Node.ELEMENT_NODE)
            html += n.outerHTML + sep;
        else
            html += xml.serializeToString(n) + sep;
    }
    return html;
}

console.log(get_document_html().slice(0, 200));
স্নিপেট প্রসারিত করুন

— স্যাম ওয়াটকিন্স
সূত্র
-2

চাইল্ডনোডস এবং ডকুমেন্টের মাধ্যমে আপনাকে বাইরের এইচটিএমএল সামগ্রীটি পেতে হবে।

ভিবিএতে এটি দেখতে এমন দেখাচ্ছে

For Each e In document.ChildNodes
    Put ff, , e.outerHTML & vbCrLf
Next e

এটি ব্যবহার করে, আপনাকে <! DOCTYPE> নোড সহ ওয়েব পৃষ্ঠার সমস্ত উপাদান যদি এটি উপস্থিত থাকে তবে তা পেতে দেয়

— milevyo
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.