2

有问题的网站：http: //homecapture.ca/testset/index.html

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

问题：Galleria 插件只能在 Chrome 5.0 的包含 iframe 的内部正常工作，在 IE8 中的行为不一致（似乎在我的本地副本中工作，但无法在线正确加载），并且没有正确加载火狐 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 在 iframed 页面的 <head> 中生成脚本，除了链接到 jQuery 和 Galleria 插件。所有这些似乎都在负责图库导航，我已将其重新定位到页面的 <body> 中，以使其在父页面脚本之后加载，并与图库内容一起加载。

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

在这一点上，我不确定我还能做些什么来解决问题，而不是在所有或部分库中挖掘并插入 .js 文件（如果没有一些指针，我没有足够的知识去做）。有没有人处理过类似的问题？我在这里看到了一些使用 jQuery 从父页面操作 iframe 内容的解决方案，这是我应该研究的吗？

您好，首先 - 我对 javascript 并不完全陌生，但并不像我使用 html 和 css 那样精通它，而且对 jQuery 尤其陌生......所以如果这个问题看起来很简单或很明显，请原谅我，但是经过几天的谷歌我仍然没有解决问题......使用jQuery 1.4.2.min，jQuery-ui-1.8.1 ....

4

3 回答 3

3

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

为什么我的滑块、谷歌地图、sIFR 等放置在隐藏（非活动）选项卡中时不起作用？

任何需要一些维度计算来初始化的组件都不会在隐藏的选项卡中工作，因为选项卡面板本身是通过 display: none 隐藏的，因此内部的任何元素都不会报告它们的实际宽度和高度（在大多数浏览器中为 0） .

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

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

这在我的情况下非常有效。

于 2010-06-15T21:28:06.160 回答
1

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

新问题：我如何导致麻烦的脚本（现在放置在外部文件中，并使用它的主体调用画廊页面

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

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

换句话说，如何让 UI 选项卡使用 ajax 加载 iframe 内容，确认新元素已添加到 DOM，然后才执行将列表元素变成画廊的功能？

于 2010-06-07T22:52:03.630 回答
1

这是我去 2 个画廊的方式，

首先定义2个画廊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});

啊啊啊和：

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();
}

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

于 2011-09-23T22:38:10.383 回答