关闭图库后重新加载 iframe

Posted

技术标签:

【中文标题】关闭图库后重新加载 iframe【英文标题】:Reload iframe after closing out of image gallery 【发布时间】:2013-10-04 03:22:39 【问题描述】:

我正在做一个项目。我对fancybox界面的了解有限,我正在学习。这是场景。我有一个链接到 Fancybox iFrame 的页面。在那个 iFrame 中,我有一个指向 Fancybox 画廊的链接。此功能运行良好,但在关闭图库时,我希望它返回到之前加载的 iFrame。我一直在寻找和寻找,无法弄清楚。

这里是my main page 和the iframe in question 的链接。

这是我使用 iFrame 运行以加载 Fancybox 库的代码:

<!-- Add jQuery library -->
<script type="text/javascript" src="fancyapps/lib/jquery-1.10.2.min.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancyapps/source/jquery.fancybox.js?v=2.1.5">    </script>
<link rel="stylesheet" type="text/css" href="fancyapps/source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancyapps/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="fancyapps/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

</script>
<script>
/* <![CDATA[ */
$(document).ready(function() 
$('.imagen').click(function(e)
    e.preventDefault();
parent.$.fancybox([
href:'nicedesigns.jpg', title: 'This logo was made using Adobe Photoshop CS5.  The idea for this logo was the representation of a 3D effect without the need for any special software.  The inner colors were made using a blend of the Inner Shadow option in Photoshop.  And the 3D effect was made by creating numerous copies of the same layer and adjusting them slightly.',
href:'_3990424744.jpg', title: 'With this logo I was looking to make a water effect over any given letter.  This was achieved through the use of Adobe Photoshop CS5.  The water effect was created using a pre-made patter, and was repeated and resized numerous times.  The actual water effect along the bottom was created using a patter overlay on top of a layer mask.',
href:'_4891737295.jpg', title: 'I did this logo for my sons birthday party.  He fell in love with the Tron Legacy movie when that came out and wanted something that we could print onto a t-shirt.  This effect was achieved through the use of Adobe Photoshop CS5.  I used a Tron typeface to create the original letters, and then used a mixture of Outer and Inner Glow effects to brighten the lettering.  Finally I used a layer mask to copy the original text and reverse it to create the lower reflection.'
],
//          href: this.href,
        helpers: 
            overlay: 
            opacity: 0.3
            , // overlay
            title : 
                type : 'inside'
            
            //, buttons: 
         // helpers
    ); // fancybox
); // click

$('.imagen2').click(function(e)
    e.preventDefault();
parent.$.fancybox([
href:'neverendingmall.jpg', title: 'This is a mock website created for one of my courses at DeVry University.  I was the project manager for this course and had a group of five designers under me.  We each had three store websites we had individually created, and then combined them to form the Neverending Mall website.  I provided the overall layout, color design, employment application form, and Spry Menus.  This site can be viewed at the following address.  http://mnice.mydevryportfolio.com/WGD242/Week8/',
href:'tutorial.jpg', title: 'This is a mock tutorial website created for one of my courses at DeVry University.  I was responsible for the complete creation of the website, from start to finish.  I used a blend of Adobe Dreamweaver to build the overall site, Adobe Flash for the banner, and Screen capture software for the videos.',
href:'wcoilmobile.PNG', title: 'This is an official website for one of my employers.  I was tasked with converting their main website into a mobile friendly version.  This was achieved through the use of Adobe Dreamweaver, CSS templates, and Adobe Photoshop to create the button links.'
],
//          href: this.href,
        helpers: 
            overlay: 
            opacity: 0.3
            , // overlay
            title : 
                type : 'inside'
            
            //, buttons: 
         // helpers
    ); // fancybox
); // click
$('.imagen3').click(function(e)
    e.preventDefault();
parent.$.fancybox([
href:'flash1.png', title: 'This Flash animation was created for one of my DeVry University courses.  It was created using Adobe Flash Professional.  A full version of this animation can be seen at <a href="http://mnice.mydevryportfolio.com/WGD250/Tutorial/" target="_new">This Link</a>',
href:'tutorial.jpg', title: '02',
href:'wcoilmobile.PNG', title: '03'
],
//          href: this.href,
        helpers: 
            overlay: 
            opacity: 0.3
            , // overlay
            title : 
                type : 'inside'
            
            //, buttons: 
         // helpers
    ); // fancybox
); // click

); // ready
/* ]]> */
</script>

感谢任何帮助。

【问题讨论】:

如果你想卖网站,请多学习。您的网站设计很差。 ;( 【参考方案1】:

您可以将打开的 iframe 的名称放在 javascript 变量中,并在库中设置 onClose 事件以打开保存在变量中的 iframe。

【讨论】:

感谢 FMB89 的建议。我会在助手部分之前添加变量吗?抱歉,可以在这方面使用一些指导。仍然只是学习这些东西。

以上是关于关闭图库后重新加载 iframe的主要内容,如果未能解决你的问题,请参考以下文章

关闭子视图后重新加载视图

关闭 UIViewController 后如何重新加载 tableView

Colorbox - 在颜色框内容中删除自定义 iframe 时防止父页面重新加载?

在iframe内页面完全加载完后,关闭父页面生成的div遮罩层

关闭或停止后重新加载弹簧上下文

如何使用从 iframe 加载的点击事件关闭引导模式