如何使用jQuery Mobile將外部頁面加載到「容器」div中？

我正在使用jQuery Mobile構建PhoneGap應用程序。我希望應用程序從外部源加載html頁面，並將其放到用戶單擊該鏈接的同一個html頁面的「content」div中（但是轉到JQM的另一個「頁面」div）。如何使用jQuery Mobile將外部頁面加載到「容器」div中？

「＃booking-content」是內容div，我希望外部頁面加載到。
「#bookings」是頁面div，我想加載並顯示
外部頁面已被加載。
「#bookings_link」是用戶點擊鏈接的ID，以及函數調用的起源地址。

這裏的點擊事件的鏈接-function：

$('#bookings_link').click(function(){' 
    $("#booking_content").load("http://www.pagetoload.com",function(){ 
     $('#booking_content').trigger("pagecreate").trigger("refresh"); 
     $.mobile.changePage($("#bookings"), { transition: "slideup"}); 
})

我已經試過，使用jQueryMobile的$ .mobile.loadPage功能全，以及：

$.mobile.loadPage("http://www.pagetoload.com",{pageContainer: $('#booking_content')}); 
$.mobile.changePage($("#bookings"), { transition: "slideup"});

使用jQuery的load方法，我收到以下錯誤消息：未捕獲的TypeError：對象[對象DOMWindow]在文件中沒有方法'addEvent'：和「未知鉻eroor：-6」

我還試圖以包括邏輯進入pagebeforechange環（http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic。 HTML）但沒有結果。從這一點，該應用程序是在說：*遺漏的類型錯誤：無法在文件讀取的未定義的屬性「選項」：///android_asset/www/jquery.mobile-1.1.1.min.js：81 *

我已經爲跨域鏈接設置了$ .support.cors和$ .mobile.allowCrossDomainPages設置。

我正在使用jquerymobile 1.1.1和jQuery的核心1.7.1。我正在使用Android SKD api level 16 AVD進行測試。

一個奇怪的事情是，我得到了用相同的邏輯工作較早的頁面加載功能，但由於我沒有使用SVN，我沒有可能檢查錯誤在哪裏。

我完全被這個問題所困擾，如果有人能爲我指出正確的方向，我將非常感激。

來源

2012-09-22 BigGiantHead

好吧，我想我可以通過使用jQuery的.get函數獲取外部頁面的內容，適當地格式化所提取的數據並將其放到div中。但是因爲我很懶，我寧願函數是爲了做我上面說的東西..所以如果任何人有一些線索爲什麼顯示這些錯誤信息，請回答:)謝謝！ – BigGiantHead

我想你是在描述Phonegap childbrowser plugin的功能，請查看:-)。

來源

2012-09-22 11:59:05 Nelson

我很抱歉，但事實並非如此。 Childbrowser插件只是打開一個新的瀏覽器，當你不想在同一個瀏覽器窗口中顯示內容時，你可以做些什麼。我想要將外部頁面的內容加載到當前頁面的div中。 – BigGiantHead

這是我的解決方案。我調用函數app_getPage（filePath）以加載包含頁面內容的文本字符串。然後我使用jQuery在<div>更新HTML如下：

// Fetch a page into a var 
var pageText = app_getPage('pages/test.html'); 
// Did it work? 
if(pageText) 
{ 
    // Yes it did, stick it out there 
    $('#appTestDiv').html(pageText); 
    $('#appMainDiv').trigger('create'); // Probably not necessary 
} 
else 
{ 
    // No good so handle the failure here 
    app_doEndOfWorldPanicRebootAndMeltDown(); 
}

注意，在我的例子下面的函數引用appData.PageTopTag和appData.PageBottomTag，我用那些剛剛在我的<body>標籤這樣我就可以去除封閉的文檔元素。在這種情況下，它們分別包含和。通過這種方式，我可以使用我最喜歡的HTML編輯器來創建我想要加載的內容，而不用擔心它添加到我的頁面上的所有垃圾。我還使用appData.Debug來決定我是否處於調試模式以將垃圾發送到控制檯。

function app_getPage(filePath) 
{ 
    // Get the file name to load 
    if(appData.Debug) console.log(arguments.callee.name + ":LoadFile:" + filePath);   
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET",filePath,false); 
    xmlhttp.send(null); 
    // Did we get the file? 
    if(xmlhttp.status != 0) 
    { 
     // Yes, remember it 
     var fileContent = xmlhttp.responseText; 
     if(appData.Debug) console.log("LoadFile-Success"); 
    } 
    else 
    { 
     // No, return false 
     if(appData.Debug) console.log("LoadFile-Failure"); 
     return false; 
    } 
    if(appData.Debug) console.log("FileContent-Original:" + fileContent); 
    // Get the indexes of the head and tails 
    var indexHead = fileContent.indexOf(appData.PageTopTag); 
    indexHead = indexHead >= 0 ? indexHead : 0; 
    var indexTail = fileContent.indexOf(appData.PageBottomTag); 
    indexTail = indexTail >= 0 ? indexTail : fileContent.length(); 
    // Now strip it 
    fileContent = fileContent.substr(indexHead,indexTail); 
    if(appData.Debug) console.log("FileContent-Stripped:" + fileContent); 
    // Return the data 
    return fileContent; 
}

所以，如果'頁/ test.html的'包含以下內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Title Foo</title> 
    </head> 
    <body> 
    <!--FooTop--> 
     <div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true"> 
     <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a> 
     <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a> 
     <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a> 
     </div> 
    <!--FooBottom--> 
    </body> 
</html>

你會得到<div id="appTestDiv" data-role="content"></div>裝有：

<div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true"> 
    <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a> 
    <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a> 
    <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a> 
</div>

我知道有更多的這樣做的緊湊方式，大多數人會討厭我的格式，但這對我很有用，乾淨，易於閱讀。

來源

2013-06-02 20:50:10 BigMikeL

如何使用jQuery Mobile將外部頁面加載到「容器」div中？

回答

相關問題