从 iframe 内部加载 Jquery (Galleria) 脚本的问题答案

【问题标题】：Issues loading Jquery (Galleria) script from inside an iframe从 iframe 内部加载 Jquery (Galleria) 脚本的问题
【发布时间】：2010-06-01 04:34:35
【问题描述】：

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

问题：galeria 插件只能在 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 在 iframed 页面的

中生成脚本，除了链接到 jQuery 和 Galleria 插件。所有这些似乎都在负责图库导航，我已将其重新定位到页面的中，以使其在父页面脚本之后加载，并与图库内容一起加载。

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

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

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

【问题讨论】：

我也发现了这一行：nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain，但不知道如何有效地使用这些信息（好像有人在收到负载确认后尝试触发 iframe 中的脚本可能会奏效)

标签： jquery ajax iframe jquery-ui-tabs galleria

【解决方案1】：

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

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

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

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

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

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

【讨论】：

对我来说也很完美。把我的头发拉了好几个小时。谢谢！

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案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});

aaaaaa 和：

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

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

【讨论】：