Question

相关网站：http://homecapture.ca/testset/index.html

场景：我有一个从无序列表生成的选项卡式菜单，当单击一个菜单项时，它会显示一个链接到包含图像库的页面的iframe。我正在使用选项卡式菜单的jQuery UI选项卡，我链接的库是jQuery Galleria页面，使用Jalbum自动生成。

问题：galleria插件只能在Chrome 5.0中包含iframe的内部正常工作，在IE8中有不一致的行为（似乎在我的本地副本中工作，但无法在线正常加载），并且不是在Firefox 3.6.3中正确加载。 Galleria页面不显示缩略图区域和第一个大图像，而是仅显示第一个缩略图，然后单击它链接到的图像，但如果右键单击并返回，iframe内容将显示为正确呈现Galleria页面。

所以代码如下：

<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>

Jalbum在＆lt;中生成脚本头＆GT; iframed页面除了链接到jQuery和galleria插件之外。所有这些似乎都负责画廊导航，我已将其重新定位到＆lt;体＆GT;页面的一部分，努力使其在父页面脚本之后加载，并与图库内容一起加载。

编辑：浏览过更多，看起来简单地将脚本从标题重新定位到正文的末尾并不一定会导致整个iframe在代码之前被加载（这似乎是问题）

此时我不知道我还能做些什么来解决这个问题，而不是在所有或部分库中挖掘并插入.js文件（我没有足够的知识可以在没有指针的情况下完成）。有没有人处理类似的问题？我在这里看到一些用jQuery从父页面操作iframe内容的解决方案，这是我应该研究的内容吗？

您好，首先 - 我不是全新的javascript，但我不熟练，因为我使用的是html和css，而且我对jQuery特别陌生......所以请原谅我，如果这个问题看起来很容易或显而易见，但经过几天谷歌我还没有解决问题的方法......使用jQuery 1.4.2.min，jQuery-ui-1.8.1 ....

Answer 1

我是一个菜鸟，并没有完全理解你的问题，但也许这个简单的解决方案会帮助你。我正在使用jQuery UI Tabs和Galleria 1.2 beta（虽然不是iframe），并且我的画廊在非活动标签中没有正确加载时遇到了同样的问题。根据jQuery UI选项卡documentation：

为什么我的滑块，Google Map，sIFR等在放入隐藏（非活动）标签时不起作用？

任何需要进行初始化计算以进行初始化的组件都不能在隐藏选项卡中工作，因为选项卡面板本身是隐藏的   显示：无   这样内部的任何元素都不会报告它们的实际宽度和高度（在大多数浏览器中为0）。

有一个简单的解决方法。使用左侧技术隐藏非活动选项卡面板。例如。在样式表中用
替换类选择器“.ui-tabs .ui-tabs-hide”的规则

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

这在我的案例中完美无缺。

Answer 2

好的，所以问题的'回答'是这样的：当容器页面上的DOM准备就绪时，加载并执行将图像列表转换为图库的Galleria插件脚本（具有UI选项卡的页面，其中包含Galleria页面的iframe最初被隐藏）。由于此时iframe内容尚未添加到DOM，因此脚本正在对“不存在”的元素执行。这解释了重新加载iframe时的正确性能。

新问题：我如何导致麻烦的脚本（现在放在外部文件中，并使用

从它的身体调用到图库页面

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

在单击并显示适当的选项卡时加载并执行？

换句话说，可以做些什么来使UI标签加载iframe内容与ajax，确认新元素已添加到DOM，然后才执行将列表元素转换为图库的函数？

Answer 3

这是2个画廊的方式，

首先定义2个galleria id：

$('#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);

每个小组包括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();
}

不知道我是否足够清楚，但随时可以询问我的方式

从iframe内部加载Jquery（Galleria）脚本的问题

3 个答案: