发表新帖
发表新帖

How do I load an HTML page in a
using JavaScript?

后端 未结
关注
15 1939
醉话见心
醉话见心 2020-11-22 08:29

I want home.html to load in

15条回答
  • 予麋鹿
    2020-11-22 09:11

    You can use the jQuery load function:

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

    Sorry. Edited for the on click instead of on load.

    0 讨论(0)
  • 自闭症患者
    2020-11-22 09:12 
    $("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

    or 

    document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
    0 讨论(0)
  • 后悔当初
    2020-11-22 09:12

    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>
    0 讨论(0)
  • 萌比男神i
    2020-11-22 09:13

    Use this simple code

    <div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
    0 讨论(0)
  • 攒了一身酷
    2020-11-22 09:15

    try

    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>

    0 讨论(0)
  • 走了就别回头了
    2020-11-22 09:19

    I finally found the answer to my problem. The solution is 

    function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
    0 讨论(0)
 看不清?
提交回复
热议问题