161

আমি হোম.ইচটিএমএলটি লোড করতে চাই <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>

আমি ফায়ারফক্স ব্যবহার করার সময় এটি ঠিকঠাক কাজ করে। আমি যখন গুগল ক্রোম ব্যবহার করি তখন এটি প্লাগ-ইন করার জন্য জিজ্ঞাসা করে। আমি গুগল ক্রোমে এটি কীভাবে কাজ করব?

javascript html google-chrome

— Giliweed
সূত্র

1

আর হিসেবে মিথ্যা ফিরে মনে রাখবেনload_home(); return false

— mplungjan

2

লাইব্রেরি ছাড়া খুব সহজ নয়। আইফ্রেমে লোড করা ভাল হতে পারে। : আউট পোস্টটি চেক করুন stackoverflow.com/questions/14470135/...

— sgeddes

1

হোম এইচটিএমএল একটি সাধারণ ওয়েব পৃষ্ঠা, আমি কেবল এটির নাম রেখেছি। @ জয়হারিস

— গিলিওয়েড

এবং আপনি সেই পৃষ্ঠার সমস্ত কিছু সামগ্রী উপাদানগুলিতে লোড করার চেষ্টা করছেন, বা কেবল সামগ্রীর উপাদানটিতে পৃষ্ঠাটির একটি লিঙ্ক স্থাপন করবেন?

— অ্যাডেনেও

আমি সেই পৃষ্ঠাটিতে থাকা সমস্ত কিছু সামগ্রী সামগ্রীতে লোড করার চেষ্টা করছি। আমি প্রশ্নটি সম্পাদনা করেছি। @ অ্যাডিনিও

— গিলিওয়েড

213

অবশেষে আমি আমার সমস্যার উত্তর খুঁজে পেয়েছি। সমাধানটি হ'ল

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

— Giliweed
সূত্র

3

যদিও এটি মার্জিত এবং পরিষ্কার, তবে আমি মনে করি আপনি যদি ডিওএম এপিআইয়ের মাধ্যমে বাস্তবে উপাদানটি তৈরি করেন তবে এটি আরও ভাল be

— ডেভিড

3

এটি আক্রমণের জন্য ধীর এবং অনিরাপদ - নীচে আমার উত্তরটি দেখুন (মন্তব্যে ফিট করার জন্য খুব দীর্ঘ ছিল)

— স্যাম রেডওয়ে

1

@ ডেভিডমেস আপনি কি পরামর্শ দিচ্ছেন? আপনি একটি নমুনা দেখাতে পারেন?

— এক্সএমএল

2

যদিও এটি অনিরাপদ হতে পারে, যদি আপনি "আপনার ডেস্কটপের কোনও ফোল্ডারের মধ্যে একটি স্থানীয়" বিকাশ করে থাকেন তবে এটি ঠিক আছে - প্রত্যেকে ক্লায়েন্টদের সাথে ব্যাংক অ্যাকাউন্টের তথ্য পরিচালনা করে একটি এক্সএসএস আক্রমণে চালিত কোনও ব্যাংক ওয়েবসাইট চালাচ্ছে না। সমাধানের জন্য ধন্যবাদ, আমার প্রয়োজনের জন্য আমি অন্য পথে যেতে হয়েছিল এবং পাইথন সার্ভারের প্রয়োজন এবং বহিরাগত গতিযুক্ত লোড এইচটিএমএল জন্য নিয়মিত জ্যাকুয়ারি লোড () ফাংশনটি ব্যবহার করে শেষ করেছি। তবে এটি আমার সংখ্যায় আমাকে পেতে সহায়তা করল

— রবারার

1

@ কামিলকিএকজেসউইস্কি type="type/html"পরিবর্তন করা হয়েছেtype="text/html"

— শায়ান

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>

দুঃখিত। লোডের পরিবর্তে ক্লিকের জন্য সম্পাদিত।

— হারুন লিসকে
সূত্র

হাই, আমি এই পদ্ধতিটি ব্যবহার করার চেষ্টা করেছি কিন্তু আমি এটি কাজ করতে পারি না। আপনি চাইলে আমি একটি নতুন প্রশ্ন খুলতে পারি। ধন্যবাদ। আমার ফিডল এখানে: jsfiddle.net/ekareem/aq9Laaew/288345

— NoChance

52

এফআইপি আনুন

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();
}

আপনার সীমাবদ্ধতার উপর ভিত্তি করে আপনার এজাক্স ব্যবহার করা উচিত এবং নিশ্চিত করা উচিত যে load_home()ফাংশনটি কল করে এমন মার্কআপের আগে আপনার জাভাস্ক্রিপ্টটি লোড হয়েছে is

রেফারেন্স - ডেভিডওয়ালশ

MDN - আনুন ব্যবহার

JSFIDDLE ডেমো

— জে হ্যারিস
সূত্র

ধন্যবাদ। তবে আমার কোডটি একটি প্রকল্পের একটি অংশের সাথে সম্পর্কিত। এবং দুঃখের সাথে বলছি যে আমি প্রকল্পের কাজগুলিতে iframe ব্যবহার করার কথা মনে করি না। আমি প্রশ্নটি সম্পাদনা করেছি। @ জয় হ্যারিসের এক নজরে দেখুন

— গিলিওয়েড

1

@ জে হ্যারিস: একই উত্স নীতি সম্পর্কে কি?

— অরুণরাজ

1

অরুনরাজ @ জাভাস্ক্রিপ্ট বিসি-র মধ্যে অন্য কোনও ওয়েবসাইট থেকে আসা একটি পৃষ্ঠা এটি সুরক্ষা উদ্বেগের বিষয় আপনি লোড করতে পারবেন না। তবে আপনি আপনার সার্ভার থেকে একটি স্ক্রিপ্ট লোড করতে পারেন, এটি সেই অন্য পৃষ্ঠাটি লোড করবে এবং এটি অ্যাজ্যাক্সের মাধ্যমে জাভাস্ক্রিপ্টে আবার প্রতিধ্বনিত করবে।

— জে হ্যারিস

1

Content-Typeএকটি GETঅনুরোধে একটি শিরোনাম যুক্ত করা কোনও অর্থবোধ করে না - আমার মনে হয় আপনি বোঝাতে চেয়েছিলেন setRequestHeader("Accept", "text/html")?

— mindplay.dk

24

আধুনিক জাভাস্ক্রিপ্ট পদ্ধতিতে এইচটিএমএল আনয়ন Fet

এই পদ্ধতির মতো আধুনিক জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলি async/awaitএবং fetchএপিআই ব্যবহার করা হয়। এটি পাঠ্য হিসাবে এইচটিএমএল ডাউনলোড করে এবং তারপরে এটি 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();
}

দেখুন এপিআই ডকুমেন্টেশন আনা আরো বিস্তারিত জানার জন্য।

— লুসিও পাইভা
সূত্র

এটি ব্যবহার করতে যাদের সমস্যা হয় তাদের জন্য, ফাংশনগুলি "উইন্ডো.অনলোড" ফাংশনের বাইরে লেখা রয়েছে তা নিশ্চিত করুন।

— শীতকালীন কারা

19

আমি এটি দেখেছি এবং ভেবেছিলাম এটি বেশ সুন্দর দেখাচ্ছে তাই আমি এটিতে কিছু পরীক্ষা চালিয়েছি।

এটি একটি পরিষ্কার পদ্ধতির মতো মনে হতে পারে, তবে পারফরম্যান্সের ক্ষেত্রে এটি jQuery লোড ফাংশন সহ একটি পৃষ্ঠা লোড করার সময় বা এক্সএমএলএইচটিপিআরকেস্টের ভ্যানিলা জাভাস্ক্রিপ্ট পদ্ধতির ব্যবহারের সময়টির তুলনায় এটি 50% ছাড়িয়ে যাচ্ছে যা প্রায় একে অপরের সাথে প্রায় একই রকম ছিল।

আমি ধারণা করি এটি কারণ হুডের নিচে এটি ঠিক একই ফ্যাশনে পৃষ্ঠাটি পায় তবে এটি একটি সম্পূর্ণ নতুন এইচটিএমলেমেন্ট উপাদানটিও নির্মাণ করতে পারে।

সংক্ষেপে আমি jQuery ব্যবহার করার পরামর্শ দিচ্ছি। সিনট্যাক্সটি যতটা সহজেই ব্যবহার করা যায় ঠিক তত সহজেই ব্যবহার করা যায় এবং আপনার ব্যবহারের জন্য এটি একটি সুন্দর কাঠামোগত কল ফিরে আসে। এটি তুলনামূলকভাবে দ্রুতও হয়। ভ্যানিলা অ্যাপ্রোচ অযৌক্তিক কয়েকটি মিলিসেকেন্ডে দ্রুত হতে পারে তবে বাক্য গঠনটি বিভ্রান্তিকর। আমি এটি কেবল এমন পরিবেশে ব্যবহার করব যেখানে আমার jQuery এ অ্যাক্সেস নেই।

এখানে আমি পরীক্ষার জন্য যে কোডটি ব্যবহার করেছি তা এখানে - এটি মোটামুটি রুচিশীল কিন্তু সময়টি একাধিক চেষ্টা জুড়ে খুব সামঞ্জস্যপূর্ণ ফিরে আসে তাই আমি প্রতিটি ক্ষেত্রে প্রায় + - 5 মাইল অবধি ঠিক বলতে পারি। আমার নিজের হোম সার্ভার থেকে ক্রোমে টেস্টগুলি চালানো হয়েছিল:

<!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

আমি মনে করি "নির্ভুল" এর পরিবর্তে আপনার অর্থ "নির্ভুল"।

— পালস0

মানে আমি এটি বহুবার চালিয়েছি এবং প্রতিবার কয়েক মিলিসেকেন্ডের মধ্যে কেবল একটি দোল ছিল। সুতরাং প্রদত্ত সময়গুলি সঠিকভাবে + - 5 মিমি বা এর কাছের কিছু। দুঃখিত আমি সেখানে সম্পূর্ণ পরিষ্কার ছিল না।

— স্যাম রেডওয়ে

6

ব্যবহার করার সময়

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

তারপরে মনে রাখবেন যে আপনি স্থানীয়ভাবে ক্রোমে "ডিবাগ" করতে পারবেন না, কারণ এক্সএমএলএইচটিপিআরকুয়েস্ট লোড করতে পারে না - এর অর্থ এই নয় যে এটি কাজ করে না, এর অর্থ কেবল আপনাকে একই ডোমেন ওরফে আপনার কোড পরীক্ষা করতে হবে to আপনার সার্ভার

— serup
সূত্র

5

"jQuery"! = "জাভাস্ক্রিপ্ট" || jQuery <জাভাস্ক্রিপ্ট || OP.indexOf ("jQuery") <1

— KittenCodings

4

আপনি jQuery ব্যবহার করতে পারেন:

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

— অনুপ
সূত্র

3

আপনার উত্তর ব্যাখ্যা করুন। এছাড়াও এটি jQuery এর মতো দেখায় যা প্রশ্নটিতে ওপি উল্লেখ করেনি।

— ডেভিড

2

স্যার এখানে আরও কিছু উত্তর jquery

— অনুপ

এই জাতীয় অ্যাজ্যাক্স কলগুলি করতে 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 পৃষ্ঠা থাকে এবং পিএইচপি ব্যবহার করতে না চান তবে ফাংশন অন্তর্ভুক্ত থাকে তবে আপনার পিএইচপি ফাংশন লিখতে হবে এবং স্ক্রিপ্ট ট্যাগে এটি জাভা ফাংশন হিসাবে যুক্ত করা উচিত।

এক্ষেত্রে আপনার জাস্ট নাম অনুসারে ফাংশন ছাড়াই এটি লেখা উচিত। স্ক্রিপ্টটি ক্রিয়াকলাপের শব্দটি প্রকাশ করুন এবং অন্তর্ভুক্ত শিরোনাম শুরু করুন।

— Creative87
সূত্র

0

এই সহজ কোড ব্যবহার করুন

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

— কাক সুপার
সূত্র

ডাব্লু 3.মিনে এইচটিএমএল () সংজ্ঞায়িত করা হয়নি

— toing_toing

যারা ভাবছেন তাদের জন্য w3-include-HTML, W3Schools.com এর W3.JSস্ক্রিপ্ট লাইব্রেরির অংশ (এখানে উপলব্ধ: w3schools.com/w3js/default.asp )। আমি এটি উল্লেখ করতে চাই যে ডাব্লু 3 স্কুলগুলি (এবং ডব্লু 3.js এবং w3.includeHTML()) কোনওভাবেই ডাব্লু 3 কনসোর্টিয়ামের সাথে সম্পর্কিত নয় (দুটি মূল গ্রুপগুলির মধ্যে একটি যা এইচটিএমএল + সিএসএস + ডোম মান নির্ধারণ করে (অন্য গ্রুপটি 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

যদি আপনার এইচটিএমএল ফাইলটি স্থানীয়ভাবে বসবাস করে তবে ট্যাগের পরিবর্তে আইফ্রেমে যান। ট্যাগগুলি ক্রস ব্রাউজারে কাজ করে না এবং বেশিরভাগ ক্ষেত্রে ফ্ল্যাশ ব্যবহার করা হয়

প্রাক্তন হিসাবে: <iframe src="home.html" width="100" height="100"/>

— জৈন অভিষেক
সূত্র

আমি কীভাবে কোনও জাভাস্ক্রিপ্ট ব্যবহার করে <ডিভি>> তে একটি HTML পৃষ্ঠা লোড করব?

আধুনিক জাভাস্ক্রিপ্ট পদ্ধতিতে এইচটিএমএল আনয়ন Fet