从html字符串中获取div内容---jquery

思考的问题：

  1. 怎么在一个网页的div中嵌套另外的网页（不使用inclue，iframe和frame，不使用他们的原因，include只能嵌套静态网页，iframe对网络爬虫影响，frame嵌套网页无法获取父级页面信息，不够灵活）
  2. 如果不想嵌套整个网页怎么办？（只是嵌套另外页面的部分内容）

回答（想法）：

  1. 使用jquery的ajax函数或者load函数可以获取网页内容，从而实现嵌套网页（获取到的网页内容是html字符串）
  2. 怎么从字符串中获取部分内容？

实践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="../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>

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>

这里可以解决第一个问题，点击获取到完整的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="../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>

到这里我们就解决了，文章开始时提出的问题。。。。。。但是这是静态页面（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>

我们可以看到，不仅获取到了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 xmlns="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="../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#包含 XMLHttpRequest 对象
58             $("#content").html($(response).find(‘div[id=container]‘).html());
59         });
60     }
61
62 </script>

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 xmlns="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>

注：如直接复制代码，请修改一下jquery文件路径

这里补充一点一下，为什么没有使用母版页

　　使用母版页，点击菜单会刷新整个网页，而且使用母版页会造成标签id发生改变，我想实现的是点击菜单，不刷新页面

时间： 2024-12-25 18:04:39

从html字符串中获取div内容---jquery的相关文章

获取html字符串中第一张图片的路径以及获取html字符串中的文字内容（去掉标签）

/** * 获取html字符串中第一张图片的路径 * @param htmlcontent * @return */ public static String getImgFromHtml(String htmlcontent){ if(htmlcontent!=null){ String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>"; Pattern p_image = Pattern.compile(regEx_img,

关于js中获取div中的数据

最近用js写了一个计算器的页面.基本上使用到了,ul  li的几点用法.用来布局,并且创造出了很不错的鼠标悬停效果. 关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML  可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT  可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA

ios 从url字符串中获取图片名字

NSString *str = @"http://pic92.nipic.com/file/20160323/22486259_160209631000_2.jpg"; NSLog(@"lastPathComponent = %@",[str lastPathComponent]);

从长字符串中获取想要的字符串

char hh[512]={0}; strcpy(hh,"PrinterSerialNumber:G11404;PrinterStatus"); string str; str=hh; str=str.replace(str.find("PrinterSerialNumber:"),strlen("PrinterSerialNumber:"),""); str=str.replace(str.find("Printe

从字符串中获取时间格式的字符

const list = 'ddsadsd2012-02-09 19:00' for (let i = 0; i < list.length; i++) { let str = list[i].workContent console.log('str',str) let datetime = [], date; str.replace(/((\d{4}(-\d{1,2}){2}).{2})?(\d{1,2}(:\d{1,2}){2})/g, function ($0, $1, $2, $3, $

获取字符串中某一个字段的数据,GetValueFromStr

gps数据格式为:$GPRMC,024813.640,A,3158.4608,N,11848.3737,E,10.05,324.27,150706,,,A* /********************************************************************** *版权所有 (C)2015, Wuyq. * *文件名称: GetValueFromStr.c *内容摘要:用于演示从gps数据字符串中获取相应的内容 *其它说明:无 *当前版本: V1.0 *作

js使用正则表达式获取字符串中特定的字符

需求:从124fddr323532${xxxasdsafxx}253${bnm}23354${abcd}233545xx54${666}233545xxxxx这类字符串中获取${}中的内容.注意${xxx}的个数是不确定的. 使用了match和exec两种方式实现,直接上代码(更推荐第二种): function getMatchedStrs (str) { var reg = /\$\{(.+?)\}/ var reg_g = /\$\{(.+?)\}/g var result = str.ma

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会. 这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料. Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf . 具体实现如下: jsp页面:  <p>                               

C# 正则获取html内容

1.获取div内容 string str = "tt<u>ss</u><div id=\"test\"><div><a>fds</a></div></div>"; Regex reg = new Regex(@"(?is)<div\s+id=""test"">(?><div[^>]*>(