161

मुझे लोड करने के लिए home.html चाहिए <div id="content">।

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

फ़ायरफ़ॉक्स का उपयोग करने पर यह ठीक काम करता है। जब मैं Google Chrome का उपयोग करता हूं, तो यह प्लग-इन के लिए पूछता है। मैं इसे Google Chrome में कैसे काम कर सकता हूं?

javascript html google-chrome

— Giliweed
स्रोत

1

और झूठ के रूप में याद रखना याद रखेंload_home(); return false

— mplungjan

2

पुस्तकालयों के बिना बहुत आसान नहीं है। एक iFrame में लोड करना बेहतर हो सकता है। इस पोस्ट की जाँच करें: stackoverflow.com/questions/14470135/…

— sgeddes

1

home.html एक सरल वेब पेज है, मैंने इसे घर का नाम दिया है। @ जहरिश

— गिलियडेड

और आप उस पृष्ठ पर मौजूद सभी चीज़ों को सामग्री तत्व में लोड करने का प्रयास कर रहे हैं, या केवल सामग्री तत्व में पृष्ठ का लिंक डाल सकते हैं?

— एडीनो

मैं उस पृष्ठ की सभी सामग्री सामग्री में लोड करने का प्रयास कर रहा हूं। मैंने प्रश्न संपादित किया। @adeneo

— Giliweed

213

मुझे आखिरकार अपनी समस्या का जवाब मिल गया। उपाय है

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

— Giliweed
स्रोत

3

भले ही यह सुरुचिपूर्ण और साफ है, मुझे लगता है कि यह बेहतर होगा यदि आप वास्तव में डोम एफी के माध्यम से ऑब्जेक्ट तत्व बनाते हैं।

— डेविड

3

यह धीमा और हमला करने के लिए असुरक्षित है - नीचे मेरा जवाब देखें (टिप्पणी में फिट होने के लिए बहुत लंबा था)

— सैम रेडवे

1

@DavidMaes आप क्या सुझाव देते हैं? क्या आप नमूना दिखा सकते हैं?

— Xsmael

2

हालांकि यह असुरक्षित हो सकता है, यदि आप अपने डेस्कटॉप पर एक फ़ोल्डर के भीतर एक सरल "स्थानीय कर रहे हैं" विकास यह ठीक है - हर कोई बैंक खाते की जानकारी को संभालने वाले ग्राहकों के साथ एक बैंक की वेबसाइट चला रहा है और एक्सएसएस हमले में भाग रहा है। समाधान के लिए धन्यवाद, अपनी आवश्यकताओं के लिए मैं एक और मार्ग जाने के लिए समाप्त हो गया और एक अजगर सर्वर की आवश्यकता थी और बाहरी गतिशील रूप से लोड किए गए HTML के लिए नियमित Jquery लोड () फ़ंक्शन का उपयोग कर रहा था। लेकिन यह मेरे मुद्दे में मेरे साथ होने के लिए मददगार था

— rwarner

1

@ KamilKiełczewski type="type/html"को बदल दिया गया हैtype="text/html"

— Shayan

63

आप jQuery लोड फ़ंक्शन का उपयोग कर सकते हैं:

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

माफ़ करना। लोड के बजाय ऑन क्लिक के लिए संपादित किया गया।

— हारून लिसके
स्रोत

नमस्ते, मैंने इस पद्धति का उपयोग करने की कोशिश की, लेकिन मैं इसे काम नहीं कर सकता। मैं चाहूं तो एक नया प्रश्न खोल सकता हूं। धन्यवाद। मेरी

— फीलिंग

52

Fetch API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
}

एक्सएचआर एपीआई

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

अपने बाधाओं के आधार पर आप ajax का उपयोग करें और सुनिश्चित करें कि आपके जावास्क्रिप्ट मार्कअप कॉल से पहले भरी हुई है बनाना चाहिए load_home()समारोह

संदर्भ - दाविदवाल्श

MDN - फ़ॉच का उपयोग करना

JSFIDDLE डेमो

— जय हैरिस
स्रोत

धन्यवाद। लेकिन मेरा कोड एक परियोजना के एक हिस्से से संबंधित है। और कहने के लिए खेद है कि मैं परियोजना के काम में iframe का उपयोग नहीं कर रहा हूँ। मैंने प्रश्न संपादित किया। एक नज़र @ संजय है

— Giliweed

1

@ जय हैरिस: उसी मूल नीति के बारे में क्या?

— अरुणराज

1

@ArunRaj आप एक ऐसे पेज को लोड नहीं कर सकते जो जावास्क्रिप्ट वेबसाइट के भीतर किसी अन्य वेबसाइट से आता है, यह एक सुरक्षा चिंता का विषय है। लेकिन आप अपने सर्वर से एक स्क्रिप्ट को लोड कर सकते हैं, जो बदले में उस दूसरे पेज को लोड करेगा और इसे अजाक्स के माध्यम से जावास्क्रिप्ट में वापस गूंज सकता है।

— जे हैरिस

1

एक Content-Typeहेडर को एक GETअनुरोध में जोड़ने से कोई मतलब नहीं है - मुझे लगता है कि आपका मतलब है setRequestHeader("Accept", "text/html")?

— mindplay.dk

24

HTML को आधुनिक जावास्क्रिप्ट तरीके से लाना

यह दृष्टिकोण आधुनिक जावास्क्रिप्ट सुविधाओं जैसे async/awaitऔर fetchएपीआई का उपयोग करता है। यह HTML को टेक्स्ट के रूप में डाउनलोड करता है और फिर इसे innerHTMLआपके कंटेनर तत्व को खिलाता है ।

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text()थोड़ा मुश्किल लग सकता है, लेकिन यह समझाने के लिए आसान है। इसके दो अतुल्यकालिक चरण हैं और आप इस तरह से उस कार्य को फिर से लिख सकते हैं:

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

अधिक जानकारी के लिए लाने के लिए एपीआई एपीआई प्रलेखन देखें।

— लुसियो पावा
स्रोत

उन लोगों के लिए जिन्हें इसका उपयोग करने में समस्या हो रही है, सुनिश्चित करें कि फ़ंक्शन "window.onload" फ़ंक्शन के बाहर लिखे गए हैं।

— शीतकालीन कारा

19

मैंने इसे देखा और सोचा कि यह बहुत अच्छा लग रहा है इसलिए मैंने इस पर कुछ परीक्षण किए।

यह एक साफ दृष्टिकोण की तरह लग सकता है, लेकिन प्रदर्शन के मामले में यह एक समय में jQuery लोड फ़ंक्शन के साथ एक पेज लोड करने या XMLHttpRequest के वेनिला जावास्क्रिप्ट दृष्टिकोण का उपयोग करने की तुलना में 50% से पिछड़ रहा है जो लगभग एक दूसरे के समान है।

मैं इसकी कल्पना करता हूं क्योंकि हुड के तहत इसे ठीक उसी अंदाज में पेज मिलता है, लेकिन इसके साथ-साथ एक पूरी नई HTMLElement वस्तु का निर्माण भी करना पड़ता है।

सारांश में मैं jQuery का उपयोग करने का सुझाव देता हूं। सिंटैक्स का उपयोग करना जितना आसान हो सकता है, यह आपके लिए उपयोग करने के लिए एक अच्छी तरह से संरचित कॉल है। यह अपेक्षाकृत तेज भी है। वेनिला दृष्टिकोण एक गैर-ध्यान देने योग्य कुछ मिलीसेकंड से तेज हो सकता है, लेकिन वाक्यविन्यास भ्रमित है। मैं इसका उपयोग केवल ऐसे वातावरण में करूँगा जहाँ मुझे jQuery की सुविधा नहीं है।

यहां वह कोड है जिसका मैंने परीक्षण किया था - यह काफी अल्पविकसित है, लेकिन समय कई प्रयासों में बहुत सुसंगत है इसलिए मैं प्रत्येक मामले में लगभग + 5ms तक सटीक कहूंगा। Chrome में मेरे अपने होम सर्वर से टेस्ट चलाए गए:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>

— सैम रेडवे
स्रोत

1

मुझे लगता है कि "सटीक" के बजाय आपका मतलब है "सटीक"।

— नाड़ी ०

मेरा मतलब है कि मैंने इसे कई बार चलाया और हर बार कुछ मिलीसेकंड का केवल एक स्विंग था। तो जो समय दिया गया है वह + 5ms या उससे कुछ अधिक सटीक है। क्षमा करें, मैं वहां पूरी तरह से स्पष्ट नहीं हो सकता।

— सैम रेडवे

6

उपयोग करते समय

$("#content").load("content.html");

फिर याद रखें कि आप स्थानीय रूप से क्रोम में "डीबग" नहीं कर सकते, क्योंकि XMLHttpRequest लोड नहीं कर सकता है - इसका मतलब यह नहीं है कि यह काम नहीं करता है, इसका मतलब यह है कि आपको उसी डोमेन aka पर अपने कोड का परीक्षण करने की आवश्यकता है। आपका सर्वर

— सेरुप
स्रोत

5

"jQuery"! = "जावास्क्रिप्ट" || jQuery <जावास्क्रिप्ट || OP.indexOf ("jQuery") <1

— KittenCodings

4

आप jQuery का उपयोग कर सकते हैं:

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});

— अनूप
स्रोत

3

कृपया अपना उत्तर बताएं। इसके अलावा यह jQuery की तरह दिखता है जिसका ओपी ने प्रश्न में उल्लेख नहीं किया था।

— डेविड

2

साहब यहाँ कुछ और जवाब दिए गए हैं

— अनूप

jQuery ऐसे अजाक्स कॉल करने के लिए बहुत मानक है; इसलिए मुझे उत्तर संक्षिप्त और उचित लगता है।

— लुका

2

प्रयत्न

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

कोड स्निपेट दिखाएं

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}

<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत

1

$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

या

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';

— कृष्ण पितर
स्रोत

0

गितुब पर यह प्लगइन है जो एक तत्व में सामग्री लोड करता है। यहाँ रेपो है

https://github.com/abdi0987/ViaJS

— ग्रब चलाएं
स्रोत

0

यह आम तौर पर तब आवश्यक होता है जब आप शीर्ष लेख या पृष्ठ को शामिल करना चाहते हैं।

जावा में यह विशेष रूप से आसान है यदि आपके पास HTML पेज है और आप php फ़ंक्शन का उपयोग नहीं करना चाहते हैं, लेकिन आपको php फ़ंक्शन लिखना चाहिए और इसे स्क्रिप्ट टैग में जावा फ़ंक्शन के रूप में जोड़ना चाहिए।

इस मामले में आपको इसे जस्ट फंक्शन के नाम से लिखना चाहिए। स्क्रिप्ट फंक्शन वर्ड को क्रोधित करती है और हेडर को शामिल करना शुरू करती है। Ip को php कन्वर्ट करें फंक्शन को स्क्रिप्ट टैग में जावा फंक्शन में शामिल करें और अपनी सभी कंटेंट को उस फाइल में शामिल करें।

— Creative87
स्रोत

0

इस सरल कोड का उपयोग करें

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

— काक सुप
स्रोत

w3.includeHTML () परिभाषित नहीं है

— toing_toing

सोच रहे लोगों के लिए, w3-include-HTMLW3Schools.com की W3.JSस्क्रिप्ट लाइब्रेरी का हिस्सा है (यहाँ उपलब्ध है: w3schools.com/w3js/default.asp )। मुझे लगता है कि W3Schools का कहना चाहते हैं (और w3.js, और w3.includeHTML()) W3 Consortium (दो मुख्य समूहों है कि HTML + सीएसएस + डोम मानकों (दूसरे समूह WHATWG जा रहा है परिभाषित में से एक के साथ संबद्ध किसी भी तरह से नहीं हैं)।

— दाई

-4

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>

— रुडोल्फ रेमिसक
स्रोत

1

एक उत्तर के साथ उत्तर देना जो प्रश्न के अनुरूप नहीं है, इसका भी पहले से ही उसी व्यक्ति द्वारा उत्तर दिया गया है जिसने पूछा था

— केटलर

-5

यदि आपकी HTML फ़ाइल स्थानीय रूप से रहती है, तो टैग के बजाय iframe पर जाएं। टैग क्रॉस-ब्राउज़र काम नहीं करते हैं, और ज्यादातर फ्लैश के लिए उपयोग किए जाते हैं

पूर्व के लिए: <iframe src="home.html" width="100" height="100"/>

— जैन अभिषेक
स्रोत

मैं जावास्क्रिप्ट का उपयोग करके <div> में एक HTML पृष्ठ कैसे लोड करूं?

HTML को आधुनिक जावास्क्रिप्ट तरीके से लाना