Fatal编程技术网
  • javascript/
  • 如何在<；中加载HTML页面；部门>；使用JavaScript？

如何在<；中加载HTML页面；部门>；使用JavaScript？

javascript html google-chrome

如何在<；中加载HTML页面；部门>；使用JavaScript？,javascript,html,google-chrome,Javascript,Html,Google Chrome,我想在中加载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=

我想在
中加载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>


函数加载_home（）{
document.getElementById（“内容”）.innerHTML=''；
}
当我使用Firefox时，这很好用。当我使用Google Chrome时，它需要插件。如何让它在Google Chrome中工作？

您可以使用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>


$（文档）.ready（函数（）{
$（“#加载#home”）。在（“单击”，函数（）上{
$（“#content”）.load（“content.html”）；
});
});
对不起。为点击而不是加载进行编辑。

获取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();
}
XHR 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\u home（）
函数的标记之前加载javascript

我终于找到了问题的答案。解决办法是

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

函数加载_home（）{
document.getElementById（“内容”）.innerHTML=''；
}
使用时

$("#content").load("content.html");
然后请记住，您不能在chrome中本地“调试”，因为XMLHttpRequest无法加载——这并不意味着它不工作，只是意味着您需要在同一个域上测试代码。您的服务器

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（switchTextDiv、showHideDiv）
{
var std=document.getElementById（switchTextDiv）；
var shd=document.getElementById（showHideDiv）；
如果（shd.style.display==“块”）
{
shd.style.display=“无”；
std.innerHTML=“显示”；
}
其他的
{

如果（shd.innerHTML.length，您可以使用jQuery：


<!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上有一个插件，可以将内容加载到元素中


我看到这个，觉得它看起来很不错，所以我对它进行了一些测试

这似乎是一种干净的方法，但就性能而言，与使用jQuery加载函数加载页面或使用XMLHttpRequest的普通javascript方法加载页面所需的时间相比，它落后了50%，这两种方法大致相似

我想这是因为在引擎盖下，它以完全相同的方式获取页面，但它还必须处理构建一个全新的HtmleElement对象的问题

总之，我建议使用jQuery。语法尽可能简单易用，并且有一个结构良好的回调供您使用。它也相对较快。普通方法可能会快几毫秒，但语法令人困惑。我只会在没有访问jQuery权限的环境中使用它。

这是我用来测试的代码——它相当初级，但多次测试的时间都非常一致，所以我想说，每次测试的精确时间都在+-5ms左右。测试是从我自己的家庭服务器在Chrome上运行的：


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




/**
*测试线束以找出动态加载线束的最佳方法
*将html页面导入应用程序。
*/
var测试_次={}；
var test_page='testpage.htm'；
var content_div=document.getElementById（'content'）；
//测试1=使用jQuery加载testpage.htm并计时。
/*
功能测试
{
var start=new Date（）.getTime（）；
$（content\u div）.load（测试页面，函数（）{
警报（新日期（）.getTime（）-start）；
});
}
// 1044
*/
//测试2=用于加载testpage.htm并计时。
/*
功能测试
{
开始=新日期（）.getTime（）；
content\u div.innerHTML=“”
}
//1579
*/
//测试3=使用httpObject加载到testpage.htm中并计时。
功能测试
{
var xmlHttp=new XMLHttpRequest（）；
xmlHttp.onreadystatechange=函数（）{
if（xmlHttp.readyState==4&&xmlHttp.status==200）
{
content_div.innerHTML=xmlHttp.responseText；
警报（新日期（）.getTime（）-start）；
}
};
开始=新日期（）.getTime（）；
open（“GET”，test_page，true）；//对于异步
xmlHttp.send（空）；
// 1039
}
//主运行测试
测试_u1;（）；

如果您的html文件驻留在本地，则使用iframe而不是标记。标记不能跨浏览器工作，主要用于Flash

例如：
以现代Javascript方式获取HTML
这种方法利用了现代Javascript功能，如
async/await
和
fetch
API。它将HTML作为文本下载，然后将其提供给容器元素的
innerHTML


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



await（await-fetch（url））.text（）可能看起来有点棘手，但很容易解释。它有两个异步步骤，您可以像这样重写该函数：


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


或


document.getElementById（“target_div”）.innerHTML=''；

当您想要包含header.php或任何页面时，通常需要此选项

在Javascript中，这很容易，特别是当您有HTML页面并且不想使用php包含函数时，但您应该编写php函数并将其作为Javascript函数添加到脚本标记中

在这种情况下，您应该在编写它时不使用函数，后面跟着name Just.Script，并在函数词中添加空格，然后启动include header.php
i、 e将php包含函数转换为脚本标记中的Javascript函数，并将所有内容放在包含的文件中。
试试看


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




异步函数加载\u home（）{
让url为空https://kamil-kielczewski.github.io/fractals/mandelbulb.html'
content.innerHTML=await（await-fetch（url））.text（）；
}




使用这个简单的代码


<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){

    $(selector).load(argHtml);
 
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};

var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>




W

<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){

    $(selector).load(argHtml);
 
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};

var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>