gpt4 book ai didi

jquery - 从 iframe 内部加载 Jquery (Galleria) 脚本时出现问题

转载 作者:行者123 更新时间:2023-12-01 03:05:03 30 4
gpt4 key购买 nike

相关网站: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 除了链接到 jQuery 和 Galleria 插件之外,还在 iframed 页面的 中生成脚本。所有这些似乎都负责图库导航,我已将其重新定位到页面的 ,以使其在父页面脚本之后加载,并与图库内容一起加载。

编辑:浏览了更多内容后,似乎简单地将脚本从标题重新定位到正文末尾并不一定会导致整个 iframe 在代码之前加载(这似乎是问题所在)

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

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

最佳答案

我有点菜鸟,不完全理解你的问题,但也许这个简单的解决方案会对你有所帮助。我也使用 jQuery UI 选项卡和 Galleria 1.2 beta(尽管不是 iframe),并且遇到了同样的问题,我的画廊无法在非事件选项卡中正确加载。根据 jQuery UI 选项卡 documentation :

Why does my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

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

这对我来说非常有效。

关于jquery - 从 iframe 内部加载 Jquery (Galleria) 脚本时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2947284/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com