How do I load an HTML page in a
using JavaSc

2018-12-31 17:56发布

站内文章 / JavaScript
35 0 0

问题:

I want home.html to load in <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>

This works fine when I use Firefox. When I use Google Chrome, it asks for plug-in. How do I get it working in Google Chrome?

回答1:

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

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


回答2:

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.



回答3:

USING A PROMISE (fetch API)

function fetch_text (url) {
    return fetch(url).then((response) => (response.text()));
}

Then you could chain to the results like so:

function load_home (event) {
    (event || window.event).preventDefault();
    fetch_text(\"http://www.yoursite.com/home.html\").then((html) => {
        document.getElementById(\"content\").innerHTML = html;
    }).catch((error) => {
        console.warn(error);
    });
}

Reference - davidwalsh

MDN - Using Fetch

OLD ANSWER

Since you are looking to load html contents you should try to use an iframe and make sure that your javascript is loaded before the markup that calls the load_home() function

EDIT: based on your constraints I edited the javascript to use ajax instead of an iframe. try this

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

JSFIDDLE demo



回答4:

I saw this and thought it looked quite nice so I ran some tests on it.

It may seem like a clean approach, but in terms of performance it is lagging by 50% compared by the time it took to load a page with jQuery load function or using the vanilla javascript approach of XMLHttpRequest which were roughly similar to each other.

I imagine this is because under the hood it gets the page in the exact same fashion but it also has to deal with constructing a whole new HTMLElement object as well.

In summary I suggest using jQuery. The syntax is about as easy to use as it can be and it has a nicely structured call back for you to use. It is also relatively fast. The vanilla approach may be faster by an unnoticeable few milliseconds, but the syntax is confusing. I would only use this in an environment where I didn\'t have access to jQuery.

Here is the code I used to test - it is fairly rudimentary but the times came back very consistent across multiple tries so I would say precise to around +- 5ms in each case. Tests were run in Chrome from my own home server:

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


回答5:

When using 

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

Then remember that you can not \"debug\" in chrome locally, because XMLHttpRequest cannot load -- This does NOT mean that it does not work, it just means that you need to test your code on same domain aka. your server



回答6:

You can use the jQuery : 

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


回答7:

Fetching HTML the modern Javascript way

This approach makes use of modern Javascript features like async/await and the fetch API. It downloads HTML as text and then feeds it to the innerHTML of your container element.

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

The await (await fetch(url)).text() may seem a bit tricky, but it\'s easy to explain. It has two asynchronous steps and you could rewrite that function like this:

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

See the fetch API documentation for more details.



回答8:

There is this plugin on github that load content into an element. Here is the repo

https://github.com/abdi0987/ViaJS



回答9:

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



回答10:

This is usually needed when you want to include header.php or whatever page.

In Java it\'s easy especially if you have HTML page and don\'t want to use php include function but at all you should write php function and add it as Java function in script tag.

In this case you should write it without function followed by name Just. Script rage the function word and start the include header.php I.e convert the php include function to Java function in script tag and place all your content in that included file.



回答11:

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>


回答12:

If your html file resides locally then go for iframe instead of the tag. tags do not work cross-browser, and are mostly used for Flash

For ex : <iframe src=\"home.html\" width=\"100\" height=\"100\"/>



标签： javascript html google-chrome
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~