使用JQUERY Tabs与IFRAMES实现多页面浏览
已收录资源合集
需积分: 0 145 浏览量
更新于2024-09-01
收藏 232KB PDF 举报
"本文主要介绍如何使用JQUERY Tabs插件来宿主IFRAMES，以实现在一个页面中浏览多个外部网页的功能。文章适用于具备Windows XP/Vista/7/2003/2008系统环境，使用Visual Studio 2005或2008开发，并且需要.NET Framework 2.0和ASP.NET AJAX 1.0支持的开发者。通过这种方法，用户可以在一个页面上方便地切换和浏览不同Web工具或站点，避免了同时打开多个浏览器窗口的困扰。"
在本文中，作者提出了一种解决方案，旨在满足以下需求：
1. 实现一个易于浏览的tab界面，使得用户可以方便地在各个页面间切换。
2. 提供配置方法，允许动态添加新的tab。
3. 每个tab页能够加载并宿主预设的外部网页。
技术实现的关键点包括：
1. 只在用户选择特定tab时才加载对应的内容，以优化页面加载性能。
2. 确保页面的垂直滚动条始终显示，并且只在内容超出容器时才启用滚动功能，确保良好的用户体验。
3. 确保解决方案跨浏览器兼容，能在不同浏览器上正常运行。
作者选择了JQuery UI Tabs插件作为实现tab功能的基础，因为它轻量级、易于实现，并且免费。尽管IFRAME是宿主外部内容的常见方式，但由于跨站点安全限制，直接用JQuery UI Tabs宿主外部网页并不直接可行。因此，作者需要解决这个问题。
设计方案包含三个主要部分：
1. 配置模块：用于管理并添加新的tab，可能包括输入外部URL等操作。
2. Tab界面：由JQuery UI Tabs插件提供，用户可以通过点击不同的tab来查看和切换不同的IFRAME内容。
3. IFRAME内容：每个tab页内嵌的IFRAME将加载配置好的外部网页，以实现跨域内容的展示。
这篇文章为开发者提供了一个使用JQUERY UI Tabs和IFRAME实现多网页浏览的方案，解决了跨域问题，并考虑了性能和用户体验。通过这种方式，用户可以在一个单一的页面上享受类似浏览器的多页面浏览体验，特别适合集成多种Web服务和工具的网站设计。
<table class=”contentsTable”>
<tr>
<td>
<asp:Literal ID=”Literal1″
runat=”server”></asp:Literal>
</td>
</tr>
</table>
</body>
</html>
真正神奇的地方是css代码，我设置body 的margin 为0，设置overflow 为hidden。防止scrollbars 出现在页面的body上。
IFRAME的scrolling设置为auto，因此，如果需要滚动条，也只有IFRAME提供给它。因为在IFRAME的周围有大量不好看的空
白空间，将margins 也设置为0，IFRAME的height和width被设置成100%，来确保网页内容占尽可能多的空间。请注意html标
签中使用了Literal控件。正如你将看到以下的隐藏代码， 使用Literal的目的是允许后台代码注入东西到IFRAME元素中，它能
构建了正确的querystring的ID和Path参数。
代码
代码如下:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace HomeSite
{
/// <summary>
/// Content Loader code behind class
/// </summary>
public partial class ContentLoader : System.Web.UI.Page
{
/// <summary>
/// On Page Load we need to capture query string parameters, construct
/// an IFRAME element, and inject the IFRAME element into our Literal control
/// </summary>
/// <param name=”sender”></param>
/// <param name=”e”></param>
protected void Page_Load(object sender, EventArgs e)
{
string id = “”;
string path = “”;
// Validate we have valid querystring parameters
// namely “ID” and “Path”
if (HasValue(Request[“ID”]) &&
HasValue(Request[“Path”]))
{
// Set our local variables
id = Request[“ID”].Trim().ToString();
path = Request[“Path”].Trim().ToString();
// Prepend the path URL with http:// if needed
if (!path.ToLowerInvariant().StartsWith(“http://”))
path = “http://” + path;
// Construct the IFRAME element and set the Text value of the Literal control
Literal1.Text = “<iframe class=\”contentsIframe\” ” +
“id=\”contentFrame” + id + “\” ” +
“frameborder=\”0\” src=\”” + path +
“\”></iframe>”;
}
else
{
// Either query parameter or both are not set or do not
// exist (not passed as request parameters)
Literal1.Text = “<span id=\”contentFrame\”>An ” +
“error occurred while attempting to load a web page.</span>”;
剩余10页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
2015-07-23 上传
2015-07-31 上传
2021-04-27 上传
2021-05-17 上传
2011-10-22 上传
2019-07-09 上传
weixin_38612437
- 粉丝: 5
- 资源: 906
我的内容管理
展开
最新资源
- EventBus:事件总线
- raspberry
- 提取均值信号特征的matlab代码-Challenge2021_firstunofficial:Challenge2021_firstunof
- Fire-Detection:该项目的重点是尽早尝试识别和检测火灾。 那是从烟雾开始的地方。
- 程序猿ProMonkey V2.03
- LeetCode：LeetCode刷题
- pics
- tongxunlu,条形码嵌入式c语言生成源码,c语言程序
- ud_handles:轴/图形孩子的管理。-matlab开发
- OkeTerraform
- UrduSearchingDictionory.java
- LevelClientEvIO:ev.io客户端
- 提取均值信号特征的matlab代码-second_unofficial_entry2021:second_unofficial_entry20
- MusicCD,c语言socks5源码分析,c语言程序
- sphinx-php:我的Sphinx扩展
- 基于Spring + Spring MVC + MyBatis的图书馆管理系统，使用Maven进行包管理 主要功能包括：图书查询
