思考的问题：

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

回答（想法）：

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

实践1：

index.html页面（在这个页面获取content页面的内容）

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

         <title>使用jquery的ajax函数获取网页内容</title>

         <style type="text/css">

             div{

                 display: block;

             }

         </style>

     </head>

     <body>

         <div style="width: 100%; height: 100%;">

             <div id="divTop"></div>

             <div id="divLeft" style="width: 300px; float: left;">

                 <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />

             </div>

             <div id="content" style="width: 500px; float: left;">

                 This is index.html;

             </div>

             <div id="divBotton"></div>

         </div>

     </body>

 </html>

 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>

 <script type="text/javascript">

     /*

      * 使用ajax方式获取网页内容（也可以使用load方式获取）

      * */

     //解决方案一

     function GetPageContent1(url) {

         $.ajax({

             type: 'get',

             url: url,

             async: true,

             success: function(html) {

                 $("#content").html(html);

             },

             error: function(errorMsg){

                 alert(errorMsg);

             }

         })

     }

     //解决方案二

     function GetPageContent2(url){

         /* 想知道更多的load方法信息，请查阅jquery api */

         $("#content").load(url);

     }

 </script>

content.html页面

 <html>

     <head>

         <title>内容页</title>

     </head>

     <body>

         <div id="container">

             <div style="display: block;width: 200px;height: 200px;background-color: lightgoldenrodyellow;">

                 This is Content Page;

             </div>

         </div>

     </body>

 </html>

这里可以解决第一个问题，点击获取到完整的content.html页面的内容

在查阅jquery的load方法的时候，你可以发现，其实load函数可以网页的指定内容

实践2：

改变index.html页面ajax函数的url路径，获取content.html页面div的id=container的内容

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

         <title>使用jquery的ajax函数获取网页内容</title>

         <style type="text/css">

             div{

                 display: block;

             }

         </style>

     </head>

     <body>

         <div style="width: 100%; height: 100%;">

             <div id="divTop"></div>

             <div id="divLeft" style="width: 300px; float: left;">

                 <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />

             </div>

             <div id="content" style="width: 500px; float: left;">

                 This is index.html;

             </div>

             <div id="divBotton"></div>

         </div>

     </body>

 </html>

 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>

 <script type="text/javascript">

     /*

      * 使用ajax方式获取网页内容（也可以使用load方式获取）

      * */

     //解决方案一

     function GetPageContent1(url) {

         $.ajax({

             type: 'get',

             url: url + ' #container',

             async: true,

             success: function(html) {

                 $("#content").html(html);

             },

             error: function(errorMsg){

                 alert(errorMsg);

             }

         })

     }

     //解决方案二

     function GetPageContent2(url){

         /* 想知道更多的load方法信息，请查阅jquery api */

         $("#content").load(url + ' #container');

     }

 </script>

到这里我们就解决了，文章开始时提出的问题。。。。。。但是这是静态页面（html页面），在asp.net中适用吗？

答案是不行，无论ajax函数还是load函数获取到的页面内容，都包括title标签和两个asp.net

这是ajax获取到的内容

 <title>

 </title>

 <div class="aspNetHidden">

 <input name="__VIEWSTATE" id="__VIEWSTATE" type="hidden" value="/wEPDwULLTE2MTY2ODcyMjlkZFnC6DYGAeo3UVOfkKoGc1UuBFgx7etuuF2PnttLdzX0">

 </div>

 <div class="aspNetHidden">

     <input name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" type="hidden" value="D47C80B6">

 </div>

     <div id="container">

         <div style="width: 200px; height: 200px; display: block; background-color: orange;">

             Welcome to Content Page!

         </div>

     </div>

我们可以看到，不仅获取到了div id="container"的内容而且还多了两个div和一个title

我在网上查了一些资料，有人说使用$(html).find("#container").html();可以解决，实践了一下依然不行，下面是我的最终的解决方案

这个是Test1.aspx页面，相当于之前的index.html（是我命名上的错误，还请见谅）

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="AjaxWeb.GetPageContent.Test1" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

         <style type="text/css">

             div{

                 display: block;

             }

         </style>

 </head>

 <body>

     <form id="form1" runat="server">

         <div style="width: 100%; height: 100%;">

             <div id="divTop"></div>

             <div id="divLeft" style="width: 300px; float: left;">

                 <input type="button" onclick="GetPageContent2('ContentPage.aspx');" value="获取网页" />

             </div>

             <div id="content" style="width: 500px; float: left;">

                 This is index.html;

             </div>

             <div id="divBotton"></div>

         </div>

     </form>

 </body>

 </html>

 <script src="../jquery/jquery-1.11.3.min.js" type="text/javascript"></script>

 <script type="text/javascript">

     /*

     * 使用ajax方式获取网页内容（也可以使用load方式获取）

     * */

     //解决方案一

     function GetPageContent1(url) {

         $.ajax({

             type: 'get',

             //url：直接使用url将会获取到整个网页的内容

             //url + ' #container'：获取url网页中container容器内的内容

             url: url + ' #container',

             async: true,

             success: function (html) {

                 $("#content").html($(html).find('div[id=container]').html());

                 //$("#content").html(html);

             },

             error: function(errorMsg) {

                 alert(errorMsg);

             }

         });

     }

     //解决方案二（缺点是content容器会被两次赋值，如不在加载完成之后的函数中进行数据处理，讲含有title、asp.net隐藏内容等标签）

     function GetPageContent2(url) {

         /* 想知道更多的load方法信息，请查阅jquery api */

         $("#content").load(url + ' #container', '', function (response, status, xhr) {

             //response#是获取到的所有数据（未被截取），status#状态，成功或者失败，xhr#包含 XMLHttpRequest 对象

             $("#content").html($(response).find('div[id=container]').html());

         });

     }

 </script>

ContentPage.aspx

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="AjaxWeb.GetPageContent.ContentPage" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

 </head>

 <body>

     <form id="form1" runat="server">

     <div id="container">

         <div style="display: block; width: 200px; height: 200px; background-color:Orange;">

             Welcome to Content Page!

         </div>

     </div>

     </form>

 </body>

 </html>

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

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

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

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

  1. 修改字符串中特定的内容，用于OpenRecovery Script

    下面的是实例内容 目标是把OpenRecovery Script输入的内容进行修改 当有下面的输入:(作用是安装/emmc目录下面的update-signed.zip 刷机包) install /em ...

  2. 从字符串中获取XML节点数据

    从字符串中获取XML节点数据,前一篇<字符串创建XML文档> http://www.cnblogs.com/insus/p/3298579.html 是储存为一个XML文档.现在,Insu ...

  3. bat批处理 查找替换：批处理如何查找并替换文本里特定字符串中的部分内容

    批处理如何查找并替换文本里特定字符串中的部分内容 摘自:http://www.bathome.net/thread-43349-1-1.html 脚本如下: @if()==() echo off &a ...

  4. list 分批导入db, 每1000条数据一批 , 从字符串中获取数字,小数, 版本号比较

    //这个有个弊端: 分组后分批导入, 是阻塞的,我没有导入完成,别人就不能导入, 这里可以优化成异步,线程池 public static void main(String[] args) { Rand ...

  5. Javasrcipt中从一个url或者从一个字符串中获取参数值得方法

    从url中获取参数值是che程序开发过程中的常用需求,偶然得闲,便抽空研究了一下javasrcipt下,获取参数的办法(JAVA中也类似). 首先看url的规范: URL组成:protocol :// ...

  6. mssql sqlserver 从指定字符串中获取数字的方法

    转自:http://www.maomao365.com/?p=6410 摘要: 下文主要分享从指定字符串或列中获取数字信息,如下所示: 实验环境:sql server 2000 ----编写sql函数 ...

  7. 在 cell 中获取 textFlied内容的使用

    当您读到这里时,建议先下载demo,不懂再参考博客.在iOS项目开发中,容易遇到各种个人信息填写.比如微信中设置个人信息,等.这种方式是进行控制器跳转,代理或者block传值,这种比较容易,符合常规的 ...

  8. php通过正则从字符串中获取所有图片url地址

    /** * 提取字符串中图片url地址 * @param type $str * @return type */ function getimgs($str) { $reg = '/((http|ht ...

  9. oracle 替换字符串中指定位置内容

      1.情景展示 返回服务器的身份证号需要进行加密:只保留前四位和后四位,中间使用*代替,如何实现? 2.解决方案 第一步:查看该表的身份证号的长度有几种类型: 第二步:编写sql 错误方式: 长度为 ...

随机推荐

  1. VS2010 C++ 优化配置

    个人感觉VC6.0太土了,而且有很多bug存在,且微软早就不对其更新.所以,在选择C++编程的时候.使用IDE,VC6.0一段时间以后,我毅然决然的放弃了,觉得还是使用VS2010比较有前途. 但是当 ...

  2. osg for android (一) 简单几何物体的加载与显示

    1. 首先需要一个OSG for android的环境. (1).NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一) ...

  3. Delphi XE5 附破解补丁

    Embarcadero RAD Studio XE5 Version 19.0.13476.4176: http://altd.embarcadero.com/download/radstudio/x ...

  4. 关于StrutsTypeConverter类型转换器

    <!-- 问题1: 如何覆盖默认的错误消息? 1). 在对应的 Action 类所在的包中新建 ActionClassName.properties 文件, ActionClassName 即为 ...

  5. macbook air 安装win7系统时，到最后一步要进入win7，需要给PC设置一个用户名，键盘没反应

    从 bootcamp安装:1.一定要同时选中第一项 制作usb安装盘和第二项 从网上下载最新的windows支持软件,2.然后再选第三项 安装winDows,3.当进入安装界面时选择你要安装的boot ...

  6. 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  7. MPMediaPickerController 选取本地音频－－备用

    MPMediaPickerController 与 UIImagePickerController 类似,允许用户从音乐库中选取音乐.播客.音频书. 一.创建 MPMediaPickerControl ...

  8. recovery编译学习笔记

    开始建立我们要编译机器的device目录 ./build/tools/device/mkvendor.sh htc vivo ~/boot.img 需要自己配置的部分: 位置:cm/deviec/品牌 ...

  9. 解压Taobao手机客户端发现的东西

    今天解压了Taobao手机客户端发现了几个.so文件, 其中有两个挺感兴趣的,查了一下,以后去研究下. libBSPatch.so 是用于支持增量更新功能的库文件. libwebp.so  好像是We ...

  10. synaptics驱动,插入USB鼠标禁用触控板注册表

    Title:synaptics驱动,插入USB鼠标禁用触控板注册表 --2010-11-01 22:21 记得以前用过一个synaptics的驱动,自带有插入USB鼠标禁用触控板的选项的,有些没有自带 ...