問題從一個I幀裏面裝的Jquery（廣場）腳本

涉及的網站（初學者的JavaScript？）：http://homecapture.ca/testset/index.html 問題從一個I幀裏面裝的Jquery（廣場）腳本

場景：我從一個無序列表，產生一個標籤式菜單時，菜單項點擊它會顯示一個鏈接到包含圖庫的頁面的iframe。我爲選項卡式菜單使用jQuery UI選項卡，並且我鏈接的畫廊是jQuery Galleria頁面，這些頁面是使用Jalbum自動生成的。

問題：環球大燈插件只能在Chrome 5.0中包含iframe的內部工作，在IE8中有不一致的行爲（似乎在我的本地副本中工作，但無法正確加載在線），並且在Firefox 3.6.3中未正確加載。 Galleria頁面不是顯示縮略圖區域和第一個大圖像，而是僅顯示第一個縮略圖，然後單擊它鏈接的圖像，但如果右鍵單擊並返回，則iframe內容顯示爲正確被回報的圓頂場所頁。

，使代碼看起來像：

<head> 
    <title>homecapture.ca</title> 
    <!-- link to jquery-ui-1.8.1.custom.css rel="stylesheet" -->  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      // Tabs 
      $('#tabs').tabs();  
      //hover states on the static widgets 
      $('#dialog_link, ul#icons li').hover(
       function() { $(this).addClass('ui-state-hover'); }, 
       function() { $(this).removeClass('ui-state-hover'); } 
      ); 

     }); 
    </script> 
<!--there are some more css in here for now--> 
</head> 

<body> 
    <div id="tabs" style="margin:0 auto;clear:both;"> 
     <ul> 
      <li><a href="#tabs-1"> 1 </a></li> 
      <li><a href="#tabs-2"> 2 </a></li> 
      <li><a href="#tabs-3"> 3 </a></li> 
      <li><a href="#tabs-4"> 4 </a></li> 
     </ul> 

     <div id="tabs-1"> 
     <p> Information </p> 
     </div> 

     <!--- this tab loads a flash application and works fine --> 
     <div id="tabs-2"> 
     <iframe src="tour/index.html" width="960" height="700"></iframe></div> 

     <!-- image gallery tab--> 
     <iframe id="tabs-3" src="gallery_jd/index.html" width="960" height="700"></iframe> 

     <!-- drawings tab --> 
     <iframe id="tabs-4" src="gallery/index.html" width="960" height="700"></iframe> 
    </div> <!-- end tabbed content--> 
</body>

在相冊的除了鏈接到的jQuery和Galleria插件在<頭生成腳本>中的iFrame網頁。所有這些似乎都負責畫廊導航，並且我已將其重定位到頁面的主體>，以便使其加載在父頁腳本之後，並與畫廊內容一起加載。

編輯：瀏覽了更多，似乎只是將腳本從頭部重新定位到主體的末尾並不一定會導致整個iframe在代碼之前加載（這似乎是問題）

在這一點上，我不知道我還能做些什麼來解決這個問題，而沒有深入挖掘全部或部分庫和plugs.js文件（我沒有足夠的知識來做一些指針）。有沒有人處理過類似的問題？我看到了一些解決方案，在這裏用jQuery處理來自父頁面的iframe內容，這是我應該研究的嗎？

你好，首先 - 我並不是全新的JavaScript，但我不是流利的，因爲我與HTML和CSS，並且對jQuery特別新...所以請原諒，如果這個問題似乎容易或明顯，但谷歌天后，我仍然沒有解決問題...使用jQuery 1.4.2.min，jQuery-ui-1.8.1 ....

在此先感謝所有的幫助！

來源

2010-06-01 molotok

我也發現了東西沿着這條線： http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/ 但不知道如何高效地使用這些信息（看起來像是如果有人試圖觸發腳本iframe在收到加載確認後可能會有效） – molotok 2010-06-01 16:21:31

好吧，所以我的問題的答案是這樣的：當容器頁面上的DOM準備就緒時，將圖像列表轉換爲圖庫的Galleria插件腳本將被加載並執行（帶UI標籤的頁面，包含Galleria頁面的iframe最初被隱藏）。由於此時iframe內容尚未添加到DOM，因此該腳本正在「不存在」的元素上執行。這解釋了iframe重新加載時的正確性能。

新的問題：如何引起麻煩的腳本（現在擺在一個外部文件中，並打電話給畫廊頁使用

$.getScript("res/jquery_JAlbum.js", function(){ 
    alert("gallery script loaded and executed"); 
});

要加載它的身體和執行時適當的選項卡點擊並顯示？

換句話說，用戶界面標籤可以通過ajax加載iframe內容，確認新元素已添加到DOM，然後執行將列表元素變爲圖庫的功能？

來源

2010-06-07 22:52:03 molotok

我是一個小菜，並沒有完全理解你的問題，但也許這個簡單的解決方案將幫助你。我使用的是jQuery UI Tabs和Galleria 1.2 beta（雖然不是iframes），並且與我的畫廊沒有正確加載到非活動選項卡相同的問題。根據jQuery UI標籤documentation：

爲什麼我的滑塊，谷歌地圖，sIFR等不能工作時，放置在隱藏（非活動）選項卡？

，需要用於其初始化不會在一個隱藏的標籤工作一些維計算，因爲標籤面板本身經由顯示隱藏的任何組件：無使得任何元素內將不報告其實際寬度和高度（在大多數瀏覽器中爲0）。

有一個簡單的解決方法。使用左外技術隱藏非活動選項卡面板。例如。在樣式表與

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
}

這在我的情況非常完美替換爲類選擇「的.ui-標籤的.ui-標籤隱藏」的規則。

來源

2010-06-15 21:28:06 ede

對我來說也是完美的。把我的頭髮拉出幾個小時。謝謝！ – 2012-05-10 04:32:44

這裏是我的2個畫廊方式，

定義2個拱廊IDS第一：

$('#galleria1').galleria({width: 740, height: 800}); 
$('#galleria2').galleria({width: 740, height: 800});

定義2手風琴面板，單標籤：

var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0}); 
var SpryAccordion2 = new Spry.Widget.Accordion("SpryAccordion2", {useFixedPanelHeights:false, defaultPanel:0});

aaaaaaand：

setTimeout("SpryAccordion2.closePanel();", 1000);

eac h面板包括1個環球免稅店而不是每個標籤。我也定義功能，使面板像一個面板的標籤：

function openSpryAccordion1Panel(panel) 
{ 
    SpryAccordion2.closePanel(); 
    if (panel != SpryAccordion1.currentPanel) { 
     SpryAccordion1.openPanel(panel); 
    } 
    else SpryAccordion1.closePanel(); 
} 

function openSpryAccordion2Panel(panel) 
{ 
    SpryAccordion1.closePanel(); 
    if (panel != SpryAccordion2.currentPanel) { 
     SpryAccordion2.openPanel(panel); 
    } 
    else SpryAccordion2.closePanel(); 
}

不知道我是否不夠清晰，但隨時要問我的方式

來源

2011-09-23 22:38:10

問題從一個I幀裏面裝的Jquery（廣場）腳本

回答

相關問題