思考的问题：
- 怎么在一个网页的div中嵌套另外的网页（不使用inclue，iframe和frame，不使用他们的原因，include只能嵌套静态网页，iframe对网络爬虫影响，frame嵌套网页无法获取父级页面信息，不够灵活）
- 如果不想嵌套整个网页怎么办？（只是嵌套另外页面的部分内容）
回答（想法）：
- 使用jquery的ajax函数或者load函数可以获取网页内容，从而实现嵌套网页（获取到的网页内容是html字符串）
- 怎么从字符串中获取部分内容？
实践1：
index.html页面（在这个页面获取content页面的内容）
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>使用jquery的ajax函数获取网页内容</title> 5 <style type="text/css"> 6 div{ 7 display: block; 8 } 9 </style>10 </head>11 <body>12 <div style="width: 100%; height: 100%;">13 <div id="divTop"></div>14 <div id="divLeft" style="width: 300px; float: left;">15 <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />16 </div>17 <div id="content" style="width: 500px; float: left;">18 This is index.html;19 20 </div>21 <div id="divBotton"></div>22 </div>23 </body>24 </html>25 <script type="text/javascript" src='/images/loading.gif' data-original="../jquery/jquery-1.11.3.min.js" ></script>26 <script type="text/javascript">27 /*28 * 使用ajax方式获取网页内容（也可以使用load方式获取）29 * */30 //解决方案一31 function GetPageContent1(url) {32 $.ajax({33 type: 'get',34 url: url, 35 async: true,36 success: function(html) {37 $("#content").html(html);38 },39 error: function(errorMsg){40 alert(errorMsg);41 }42 }) 43 }44 //解决方案二45 function GetPageContent2(url){46 /* 想知道更多的load方法信息，请查阅jquery api */47 $("#content").load(url); 48 }49 </script>View Code
content.html页面
1 <html> 2 <head> 3 <title>内容页</title> 4 </head> 5 <body> 6 <div id="container"> 7 <div style="display: block;width: 200px;height: 200px;background-color: lightgoldenrodyellow;"> 8 This is Content Page; 9 </div>10 </div>11 </body>12 </html>
View Code
这里可以解决第一个问题，点击获取到完整的content.html页面的内容
在查阅jquery的load方法的时候，你可以发现，其实load函数可以网页的指定内容
实践2：
改变index.html页面ajax函数的url路径，获取content.html页面div的id=container的内容
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>使用jquery的ajax函数获取网页内容</title> 5 <style type="text/css"> 6 div{ 7 display: block; 8 } 9 </style>10 </head>11 <body>12 <div style="width: 100%; height: 100%;">13 <div id="divTop"></div>14 <div id="divLeft" style="width: 300px; float: left;">15 <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />16 </div>17 <div id="content" style="width: 500px; float: left;">18 This is index.html;19 20 </div>21 <div id="divBotton"></div>22 </div>23 </body>24 </html>25 <script type="text/javascript" src='/images/loading.gif' data-original="../jquery/jquery-1.11.3.min.js" ></script>26 <script type="text/javascript">27 /*28 * 使用ajax方式获取网页内容（也可以使用load方式获取）29 * */30 //解决方案一31 function GetPageContent1(url) {32 $.ajax({33 type: 'get',34 url: url + ' #container', 35 async: true,36 success: function(html) {37 $("#content").html(html);38 },39 error: function(errorMsg){40 alert(errorMsg);41 }42 }) 43 }44 //解决方案二45 function GetPageContent2(url){46 /* 想知道更多的load方法信息，请查阅jquery api */47 $("#content").load(url + ' #container'); 48 }49 </script>View Code
到这里我们就解决了，文章开始时提出的问题。。。。。。但是这是静态页面（html页面），在asp.net中适用吗？
答案是不行，无论ajax函数还是load函数获取到的页面内容，都包括title标签和两个asp.net
这是ajax获取到的内容
1 <title> 2 3 </title> 4 5 6 <div class="aspNetHidden"> 7 <input name="__VIEWSTATE" id="__VIEWSTATE" type="hidden" value="/wEPDwULLTE2MTY2ODcyMjlkZFnC6DYGAeo3UVOfkKoGc1UuBFgx7etuuF2PnttLdzX0"> 8 </div> 9 10 <div class="aspNetHidden">11 12 <input name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" type="hidden" value="D47C80B6">13 </div>14 <div id="container">15 <div style="width: 200px; height: 200px; display: block; background-color: orange;">16 Welcome to Content Page!17 </div>18 </div>
View Code
我们可以看到，不仅获取到了div id="container"的内容而且还多了两个div和一个title
我在网上查了一些资料，有人说使用$(html).find("#container").html();可以解决，实践了一下依然不行，下面是我的最终的解决方案
这个是Test1.aspx页面，相当于之前的index.html（是我命名上的错误，还请见谅）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="AjaxWeb.GetPageContent.Test1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html ="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <style type="text/css"> 9 div{10 display: block;11 }12 </style>13 </head>14 <body>15 <form id="form1" runat="server">16 <div style="width: 100%; height: 100%;">17 <div id="divTop"></div>18 <div id="divLeft" style="width: 300px; float: left;">19 <input type="button" onclick="GetPageContent2('ContentPage.aspx');" value="获取网页" />20 </div>21 <div id="content" style="width: 500px; float: left;">22 This is index.html;23 24 </div>25 <div id="divBotton"></div>26 </div>27 </form>28 </body>29 </html>30 <script src='/images/loading.gif' data-original="../jquery/jquery-1.11.3.min.js" type="text/javascript"></script>31 <script type="text/javascript">32 /*33 * 使用ajax方式获取网页内容（也可以使用load方式获取）34 * */35 //解决方案一36 function GetPageContent1(url) {37 $.ajax({38 type: 'get',39 //url：直接使用url将会获取到整个网页的内容40 //url + ' #container'：获取url网页中container容器内的内容41 url: url + ' #container',42 async: true,43 success: function (html) {44 $("#content").html($(html).find('div[id=container]').html());45 46 //$("#content").html(html);47 },48 error: function(errorMsg) {49 alert(errorMsg);50 }51 });52 }53 //解决方案二（缺点是content容器会被两次赋值，如不在加载完成之后的函数中进行数据处理，讲含有title、asp.net隐藏内容等标签）54 function GetPageContent2(url) {55 /* 想知道更多的load方法信息，请查阅jquery api */56 $("#content").load(url + ' #container', '', function (response, status, xhr) {57 //response#是获取到的所有数据（未被截取），status#状态，成功或者失败，xhr#包含 58 $("#content").html($(response).find('div[id=container]').html());59 });60 }61 62 </script>View Code
ContentPage.aspx
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="AjaxWeb.GetPageContent.ContentPage" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html ="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server">10 <div id="container">11 <div style="display: block; width: 200px; height: 200px; background-color:Orange;">12 Welcome to Content Page!13 </div>14 </div>15 </form>16 </body>17 </html>
View Code
注：如直接复制代码，请修改一下jquery文件路径
这里补充一点一下，为什么没有使用母版页
使用母版页，点击菜单会刷新整个网页，而且使用母版页会造成标签id发生改变，我想实现的是点击菜单，不刷新页面
原标题：从html字符串中获取div内容
关键词：HTML
我知道了 