将外部页面的HTML插入到页面HTML中。

Question

我想要在我的网页中加载/插入一个外部的html页面。例如：

<b>Hello this is my webpage</b>
You can see here an interresting information :

XXXX

Hope you enjoyed

XXXX应该被一个小脚本（尽可能小）替换，该脚本加载类似于http://www.mySite.com/myPageToInsert.html的页面。

我用jquery找到了以下代码：

<script>$("#testLoad").load("http://www.mySite.com/myPageToInsert.html");</script>    
<div id="testLoad"></div>

我希望能够不使用jQuery这样的外部JavaScript库来实现相同的功能...

- Zitun

Answer 1

有两种解决方案（至少我知道的有两种）：

1. Iframe -> 这个不是很推荐

2. 向目标页面发送ajax请求。

这里是一个小脚本：

<script type="text/javascript">

function createRequestObject() {
    var obj;
    var browser = navigator.appName;
    if (browser == "Microsoft Internet Explorer") {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        obj = new XMLHttpRequest();
    }
    return obj;
}

function sendReq(req) {   
    var http = createRequestObject();
    http.open('get', req);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {    
    if (http.readyState == 4) {
        var response = http.responseText;
        document.getElementById('setADivWithAnIDWhereYouWantIt').innerHTML=response;
    }
}

 sendReq('yourpage');
//previously </script> was not visible
</script>

- zozo

---

出现以下错误：Uncaught ReferenceError: http 未定义。 - jisu

不得不添加以下列表才能使其工作：http = createRequestObject() - jisu

这是最新的吗？ - bysanchy

如果您只需要这个功能，而且不想包含任何库，那么它仍然可以正常工作。虽然自那时以来js库已经发展了很多，所以我建议使用jQuery ajax，因为它提供了更多的灵活性（5年前你可能有很多理由不使用库...现在...嗯...不是那么多了；互联网发展到了一个地步，库的100k加载不会是一场灾难，并且不同库之间的大多数冲突都已知并指出或修复）。 - zozo

Answer 2

一个 iframe 是否符合要求？

<b>Hello this is my webpage</b>
You can see here an interresting information :

<iframe id="extFrame" src="http://www.mySite.com/myPageToInsert.html"></iframe>

Hope you enjoyed

您可以使用普通的javascript设置iframe元素的src属性，以切换页面。

- Phil Jenkins

---

谢谢，我没有考虑到 iframe，因为在某些网站上它有时会出现问题...但我应该重新考虑一下。 - Zitun

Answer 3

我认为你所寻找的内容在Jquery源代码中。

你可以在这里查看更多细节 $(document).ready等效于没有jQuery

- VP.