使用JQUERY Tabs插件宿主IFRAMES

2019-11-21 00:50:54

字體：大中小

來源：轉載

供稿：網友

必備的東西：

Windows XP/Vista/7/2003/2008
Visual Studio 2005 or 2008 (download the correct version of Home Site project above)
.NET Framework 2.0 and ASP.NET AJAX 1.0
今天，很多瀏覽器提供了使用tab的能力去瀏覽更多的網頁和網站。當然這是一個非常有用的功能來替代同時打開幾個瀏覽器，但如果提供在一個頁面中瀏覽多個網頁也非常的不錯。

例如，如果你的主頁是由很多不同的有用的Web工具或者站點組成，一個tab頁面將可能非常的有用。使用框架集，IFRAME等等，都是宿主外部內容的典型方式。這些方法允許你在單個頁面上宿主多個網頁。但是使他們能正確的布局卻非常不容易。更不用說去處理頁面和IFRAME的scrollbars等問題。

這篇文章中，嘗試去宿主外部數據，提供了一個基本的解決方案,利用ASP.NET，AJAX和javascript 去處理一些遇到的麻煩。

計劃

主旨是提供一個簡單的宿主外部數據的方案，這個解決方案有下面這些簡單的需求。

1、提供一個tab界面，方便瀏覽。

2、提供一個配置方法來添加tab

3、使每個tab頁都能宿主配置的頁面

基本的技術需要是：

1、僅當tab被選中的時候，加載外部的數據內容

2、保證縱向的scrollbars的設置成顯示，而且僅當需要處理的數據溢出的時候，才顯示scrollbars 。

3、保證該解決方案是能跨瀏覽器工作

解決方案的名字和主頁面的名字都是 Home Site

分析

對于這個解決方案，我決定使用JQuery UI Tabs 來實現表格式的導航功能。我以前也使用過商業的開源的tab控件。但是JQuery UI Tabs 是輕量級的，實現非常地簡單，而且是免費的。

除了JQuery 和tab控件以及.net提供的功能，不需要其它的控件。 VS2005 將足以結合整個項目的開發環境，選擇C#作為開發語言。

我將使用一個IFRAME的宿主網站內容，由于跨站點（又名跨域）的安全限制，使用JQuery UI Tabs去宿主外部網頁將無法直接工作。

設計

這里有一個為客戶提供視覺上的最低限度的需求：

該解決方案，將需要三種不同的功能模塊：
1、配置模塊
2、使用JQuery UI Tabs 插件的tab界面
3、使用IFRAME元素宿主網頁內容辦法。
配置模塊：
一個需求的功能是是使tab可配置。我選擇最低限度，將tab的配置信息放到一個xml文件之中。雖然我可以更進一步的深入，使tab能的動態增加和刪除，我決定在本文的第二篇中提供此功能。
XML文件的格式如下：
代碼

復制代碼代碼如下:

 
<?xml version="1.0" encoding="utf-8" ?> 
<configuration> 
<tab id="TabOne" displayName="Tab One" path="www.msn.com" /> 
<tab id="TabTwo" displayName="Tab Two" path="www.amazon.com" /> 
</configuration> 

參數描述：
id = tab的唯一ID。這個ID不能包含空格
displayName =顯示在tab頭部的名字
path = 帶查詢參數的URL，"http://"是可選的。
配置文件的名字是：TabConfig.xml。現在必須手動添加或刪除tab來更新解決方案的配置文件。
內容加載器：
可以說，沒有內容加載模塊是需要用IFRAME去為tab頁面設置內部的列表項。但是如果IFRAME在一個通過使用錨作為每個tab列表項元素的子元素的獨立的宿主網頁中，我覺得在功能和測試方面沒有比IFRAME的更好的控件了：

如果你愿意,將內容裝載器做成一個通用的模塊，它接受查詢字符串參數，以便正確設置IFRAME元素；參數為元素的唯一的ID，和源屬性值，也就是加載該網頁的URL。

另一個內容加載器的設計要求是，必須使該IFRAME負載整個頁面（scrolling設置為auto）。此外，該網頁body必須隱藏溢出（通過設置樣式屬性），以避免重復滾動條。特別是當改變瀏覽器的大小時。最后，滾動條的處理必須能跨瀏覽器。

tab界面

tab界面代碼非常的簡單，可以從 JQuery UI Tabs documentation說明文檔中得到詳細的演示代碼。JQuery UI Tabs說明文檔中的和我們JQuery UI Tabs具體的實現不同的地方在于：每個tab項錨的href指向內容加載頁面，隨后加載所需的網頁到IFRAME里面。

一些額外的東西

上面的標簽，我認為它很方便去用一個div來顯示頭，logo，甚至一些鏈接或菜單項。一個更好的需求，我想要頭部能夠折疊，能使每個標簽宿主的頁面能有一個最大的視覺效果。

最終的設計布局如下：

代碼/開發
我們從內容加載器開始，下面是標記：
代碼

復制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="ContentLoader.aspx.cs" Inherits="HomeSite.ContentLoader" %> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>ContentLoader</title> 
<style type="text/css"> 
.contentsBody { margin:0; overflow:hidden; } 
.contentsTable { width:100%; height:92%; valign:top; 
cellspacing:0; cellpadding:0; border:0 } 
.contentsIframe { height:100%; width:100%; marginwidth:0; 
marginheight:0; scrolling:auto } 
</style> 
</head> 
<body class="contentsBody"> 
<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>"; 
} 
} 
/// <summary> 
/// Simple static class used to validate the value of querystring 
/// parameter is not null or an empty string 
/// </summary> 
/// <param name="o">The object to check</param> 
/// <returns>Returns true if the object (string) 
/// has a value; false otherwise.</returns> 
public static bool HasValue(object o) 
{ 
if (o == null) 
return false; 
if (o is String) 
{ 
if (((String) o).Trim() == String.Empty) 
return false; 
} 
return true; 
} 
} 
} 

只要你將querystring的ID和Path參數傳遞給它，裝載的頁面能夠單獨的運行。通過VS2005瀏覽網頁，有URL的示例：http://localhost:49573/ContentLoader.aspx?ID=1234&Path=www.amazon.com.

復制代碼代碼如下:

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;
using System.IO;
using System.Xml;
using System.Text;

namespace HomeSite
{
    /// <summary>
    /// Tab configuration static handling class
    /// </summary>
    public static class TabConfiguration
    {
        /// <summary>
        /// This class returns a collection of TabDefinition classes created from
        /// parsing the tab definitions defined in the TabConfig.xml file.
        /// </summary>
        /// <param name"page">The Page reference
        ///         calling this class</param>
        /// <returns>ArrayList of TabDefinition classes</returns>
        public static ArrayList LoadConfiguration(Page page)
        {
            // Local container for tab definitions
            ArrayList tabList = new ArrayList();

            try
            {
                // Read the contents of the TabConfig.xml file
                StreamReader reader = new StreamReader(new FileStream(
                   page.MapPath("./TabConfig.xml"),
                   FileMode.Open, FileAccess.Read));
                string xmlContent = reader.ReadToEnd();
                reader.Close();
                reader.Dispose();

                // Create an XML document and load the tab configuration file contents
                XmlDocument xmlDoc = new XmlDocument();
                xmlDoc.LoadXml(xmlContent);

// Iterate through each tab definition, create a TabDefinition class,
// and add the TabDefinition to the local ArrayList container

                foreach (XmlNode node in xmlDoc.SelectNodes("/configuration/tab"))
                {
                    TabDefinition tab = new TabDefinition();
                    tab.ID = node.Attributes["id"].Value;
                    tab.DisplayName = node.Attributes["displayName"].Value;
                    tab.Path = node.Attributes["path"].Value;
                    tabList.Add(tab);
                }
            }
            catch
            {
                // Do nothing
            }

            // Return the tab definition
            return tabList;
        }
    }

    /// <summary>
    /// This class serves as the container for a tab definition
    /// </summary>
    public class TabDefinition
    {
        /// <summary>
        /// Member variable for the Unique ID for the tab
        /// </summary>
        private string _id;

        /// <summary>
        /// Member variable for the displayed name of the tab
        /// </summary>
        private string _displayName;

        /// <summary>
        /// Member variable for the web page URL to host in the tab (IFRAME)
        /// </summary>
        private string _path;

        /// <summary>
        /// Property for the Unique ID for the tab
        /// </summary>
        public string ID
        {
            get { return _id; }
            set { _id = value; }
        }

        /// <summary>
        /// Property for the displayed name of the tab
        /// </summary>
        public string DisplayName
        {
            get { return _displayName; }
            set { _displayName = value; }
        }

        /// <summary>
        /// Property for the web page URL to host in the tab (IFRAME)
        /// </summary>
        public string Path
        {
            get { return _path; }
            set { _path = value; }
        }
    }
}

請注意頁面實例必須提供LoadConfiguration方法來正確引入TabConfig.xml的位置。我本可以使用XmlTextReader，但選擇使用StreamReader讀取整個配置文件的內容和使用XmlDocument對象解析tab的配置信息。因為我覺得快速轉儲整個配置文件比通過流程解析打開配置文件要好很多。使用XmlTextReader正屬于這種情況。

現在，讓我們看看Home Site 的主頁的標記

代碼

復制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="HomeSite._Default" %>

        // JQuery scripting
        $(document).ready(function()
        {
            var browser = navigator.appName;
            var heightAdjust = 23;
            var widthAdjust = 7;

            // Make height and width offset adjusts for non-IE browsers
            if (browser != "Microsoft Internet Explorer")
            {
                heightAdjust = 18;
                widthAdjust = 9;
            }

            // Show the panelList UL element so we can setup the tabs
            // Please note this approach eliminates Flash of Unstyled Content (FOUC)
            $('#panelList').show();

            // Setup the jQuery UI tabs
            $('#tabPage').tabs({
                cache: true, // This ensures selecting a tab does not refresh the page
                load: function(event, ui)
                {
                    // Keep links, form submissions, etc. contained within the tab
                    $(ui.panel).hijack();

                    // Adjust the IFRAME size correctly in the browser window
                    $('.contentsIframe').width((ViewPortWidth() - widthAdjust));
                    $('.contentsIframe').height((ViewPortHeight() -
                       $('.menuRow').height() - $('.tabs').height() - heightAdjust));
                }
            });

            // Toggle arrow button image and hide/show menu area
            $('#collapseArrow').click(function()
            {

                if ($(this).hasClass('ui-icon-circle-triangle-s'))
                {
                    $(this).removeClass('ui-icon-circle-triangle-s');
                    $(this).addClass('ui-icon-circle-triangle-n');
                    $('#menuDiv').show();
                }
                else
                {
                    $(this).removeClass('ui-icon-circle-triangle-n');
                    $(this).addClass('ui-icon-circle-triangle-s');
                    $('#menuDiv').hide();
                }

            // Adjust the IFRAME size correctly in the browser window
            $('.contentsIframe').width((ViewPortWidth() - widthAdjust));
            $('.contentsIframe').height((ViewPortHeight() -
              $('.menuRow').height() - $('.tabs').height() - heightAdjust));
        });

        // Adjust tab header width and visible iframe window
        // height and width after the window is resized
        $(window).resize(function(){
        $('.contentsIframe').width((ViewPortWidth() - widthAdjust));
        $('.contentsIframe').height((ViewPortHeight() -
          $('.menuRow').height() - $('.tabs').height() - heightAdjust));
        $('.ui-widget-header').width(ViewPortWidth() - widthAdjust);
        });

// Adjust tab header height and width according to the IE client viewing area
$('.ui-widget-header').width(ViewPortWidth() - widthAdjust);

        // Adjust the IFRAME height correctly in the browser window
        $('.contentsIframe').height((ViewPortHeight() -
          $('.menuRow').height() - $('.tabs').height() - heightAdjust));
        });

        // Returns width of viewable area in the browser
        function ViewPortWidth()
        {
            var width = 0;

            if ((document.documentElement) &&
                (document.documentElement.clientWidth))
            {
                width = document.documentElement.clientWidth;
            }
            else if ((document.body) && (document.body.clientWidth))
            {
                width = document.body.clientWidth;
            }
            else if (window.innerWidth)
            {
                width = window.innerWidth;
            }

return width;
}

        // Returns height of viewable area in the browser
        function ViewPortHeight()
        {
            var height = 0;

            if (window.innerHeight)
            {
                height = window.innerHeight;
            }
                else if ((document.documentElement) &&
                         (document.documentElement.clientHeight))
            {
                height = document.documentElement.clientHeight;
            }

return height;
}

這些代碼標記非常的繁瑣，我用了很多內部的注釋來解釋他們。請注意出現在標頭區的左上角的箭頭按鈕，其實就是來自我選擇的JQuery的主題中的圖像文件，使用ui-icon 和ui-icon-circle-triangle-n causes 設置collapseArrow span ，造成JQuery 顯示一個名字為ui-icon-circle-triangle-n的ico的圖像。在文檔頭部的腳本區中，我創建一個函數，當我們單擊它的時候，改變向上箭頭圖標為向下箭頭圖標，此外，同樣的單擊事件處理程序將顯示或隱藏標頭部域的div（menuDiv）。

Home Site 頁面的隱藏代碼如下：

代碼

復制代碼代碼如下:

namespace HomeSite
{
    /// <summary>
    /// Home Site (default) web page code behind class
    /// </summary>
    public partial class _Default : System.Web.UI.Page
    {
        /// <summary>
        /// On page load we need to create the tab
        /// list items for tab interface construction
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                AddTabsToForm();
        }

        /// <summary>
        /// This method calls to our business logic
        /// class to read the tab configuration file,
        /// which will return an ArrayList of TabDefinition
        /// classes. This method iterates
        /// through the ArrayList building HTML controls to add to the tab panel.
        /// </summary>
        protected void AddTabsToForm()
        {

            foreach (TabDefinition tab in TabConfiguration.LoadConfiguration(this.Page))
            {
                HtmlGenericControl tabListItem = new HtmlGenericControl();
                tabListItem.TagName = "li";
                tabListItem.InnerHtml = "<a title=/"" +
                  tab.DisplayName + "/" href=/"ContentLoader.aspx?ID=" +
                  tab.ID + "&Path=" + tab.Path +
                  "/">" + tab.DisplayName + "</a>";
                panelList.Controls.Add(tabListItem);
            }
        }
    }
}

隱藏代碼不需要做過多的解釋，關鍵的動作是創建和設置HtmlGenericControl列表項，最后它通過編程被添加tab panel中。

遇到的問題

我遇到的主要的問題是跨瀏覽器的情況下自動適應IFRAME的大小，該方案在IE 8，Firefox v3.5.6，和谷歌v3.0.195.38瀏覽器進行測試。

我必須進行瀏覽器檢測，根據IFRAME在三個瀏覽器測試的尺寸，調整相應的寬度和高度。當瀏覽器改變大小的時候，Chrome 和FireFox看起來IFRAME有個固定的高度。但是， IE8看來來會丟失在IFRAME和瀏覽器頂部之間的padding。調整寬度和高度特別是IE似乎應該盡可能的減少IFRAME到IE瀏覽器窗口的底部“蜷縮”影響。

限制

1、以下JavaScript將使你加載的網頁跳出IFRAME，我不知道任何解決辦法此（如果存在）。Code Project 網站上目前擁有類似下面的代碼，這樣配置選項指向http://www.codeproject.com/非常的容易，這里重現描述的動作。

3、我沒有使用Safari，Opera，早期版本的IE瀏覽器，或任何其他瀏覽器的早期版本測試的此解決方案，所以要在Home Site中適當地調整heightAdjust和widthAdjust變量，適應沒有測試的IE瀏覽器或低于IE8瀏覽器的版本。

總結和興趣點
雖然這種解決方案不是很復雜，通過一個標簽界面宿主外部網站內容。這是我所見過的許多網絡論壇和博客要求的功能。請注意：您也可以配置標簽可顯示自己相關的域名或網站（在同一臺服務器）。

上一篇：jquery 簡短右鍵菜單多瀏覽器兼容

下一篇：用jquery實現學校的校歷(asp.net+jquery ui 1.72)