javascript আমি কিভাবে একটি<div> জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল পৃষ্ঠা লোড করব?



html কিভাবে শিখব (9)

আমি <div id="content"> লোড করতে home.html চাই।

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

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

https://ffff65535.com


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

এই পদ্ধতিটি আধুনিক জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলি যেমন async/await এবং fetch API ব্যবহার করে। এটি HTML হিসাবে পাঠ্য ডাউনলোড করে এবং তারপর আপনার ধারক উপাদানটির innerHTML HTML এ ফিড করে।

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

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


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>

আপনি header.php বা যাই হোক না কেন পাতা অন্তর্ভুক্ত করতে চান যখন এটি সাধারণত প্রয়োজন বোধ করা হয়।

জাভাতে এটি খুবই সহজ, বিশেষ করে যদি আপনার HTML পৃষ্ঠা থাকে এবং ফ্যাকাশে ফাংশনটি অন্তর্ভুক্ত করতে না চান তবে আপনাকে অবশ্যই পিএইচপি ফাংশন লিখতে এবং স্ক্রিপ্ট ট্যাগে জাভা ফাংশন হিসেবে যুক্ত করতে হবে।

এই ক্ষেত্রে আপনি ঠিক নাম দিয়ে অনুসরণ ফাংশন ছাড়া এটি লিখতে হবে। স্ক্রিপ্টটি ফাংশন শব্দটি ক্রুদ্ধ করে এবং header.php অন্তর্ভুক্ত করে শুরু করে। Php কে স্ক্রিপ্ট ট্যাগে জাভা ফাংশনে ফাংশন অন্তর্ভুক্ত করে এবং অন্তর্ভুক্ত ফাইলটিতে আপনার সমস্ত সামগ্রী রাখুন।


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

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

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

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

আমি এটা কল্পনা করি কারণ হুডের অধীনে এটি একই রকমের পৃষ্ঠাটি পায় তবে এটিতে সম্পূর্ণ নতুন HTMLELEMENT অবজেক্ট নির্মাণের সাথেও মোকাবিলা করতে হবে।

সংক্ষেপে আমি 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>

একটি উপাদান মধ্যে উপাদান লোড যে github এই প্লাগইন আছে। এখানে repo হয়

https://github.com/abdi0987/ViaJS


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

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

তারপরে মনে রাখবেন যে আপনি স্থানীয়ভাবে ক্রোমে "ডিবাগ" করতে পারবেন না, কারণ XMLHttpRequest লোড করা যাবে না - এর অর্থ এই নয় যে এটি কাজ করে না, এটি কেবলমাত্র একই ডোমেইন উরতে আপনার কোডটি পরীক্ষা করার প্রয়োজন। আপনার সার্ভার


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

প্রাক্তন জন্য: <iframe src="home.html" width="100" height="100"/>


$("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>';





google-chrome