将外部页面html插入到页面html中 [英] Insert external page html into a page html

问题描述

我想将一个外部html页面加载/插入到我的网页中。示例：

 < b>您好，这是我的网页< / b> 
你可以在这里看到一个interresting信息：
 
 XXXX 
 
希望你喜欢
  

应将 XXXX 替换为小型脚本（尽可能小），以加载 http://www.mySite.com/myPageToInsert.html

我发现下列代码使用jquery：

 < script> $（#testLoad）.load（http：//www.mySite。 COM / myPageToInsert.html）;< /脚本> 
< div id =testLoad>< / div> 
  

我不想使用外部JavaScript库作为jquery ...

解决方案

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

发送一个ajax请求到所需的页面。

以下是一个小脚本：

 < script type =text / javascript> 
 
函数createRequestObject（）{
 var obj; 
 var browser = navigator.appName; 
 if（browser ==Microsoft Internet Explorer）{
 obj = new ActiveXObject（Microsoft.XMLHTTP）; 
} else {
 obj = new XMLHttpRequest（）; 
} 
 return obj; 
} 
 
函数sendReq（req）{
 var http = createRequestObject（）; 
 http.open（'get'，req）; 
 http.onreadystatechange = handleResponse; 
 http.send（null）; 
 
 $ b函数handleResponse（）{
 if（http.readyState == 4）{
 var response = http.responseText; 
 document.getElementById（'setADivWithAnIDWhereYouWantIt'）。innerHTML = response; 
} 
} 
 
 sendReq（'yourpage'）; 
 //先前< / script>不可见
< / script> 
  

I'd like to load/insert an external html page into my web page. Example :

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

XXXX

Hope you enjoyed

the XXXX should be replaced by a small script (the smaller as possible) that load a page like http://www.mySite.com/myPageToInsert.html

I found the following code with jquery :

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

I would like the same without using an external javascript library as jquery...

解决方案

There are 2 solutions for this (2 that I know at least):

1. Iframe -> this one is not so recommended

2. Send an ajax request to the desired page.

Here is a small script:

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

这篇关于将外部页面html插入到页面html中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！