从iframe调用父级中的Fancybox

小编典典

从iframe调用父级中的Fancybox

html

我有2个页面，分别是index.html和social.html。我清理了索引，只剩下了需要fancybox的jquery代码。我想要做的是在social.html中包含图像，当单击它时，它将打开fancybox并显示它，但是在index.html中而不是在iframe中。出现的错误是：

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick

这是我的index.html：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

在IFrame页面中：

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS：两个页面都在同一个域上…编辑：video.js->这是从fancybox来的，我没有做。

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});

阅读 313

2020-05-10

共1个答案

小编典典

首先，您应该使用fancybox v2.x来无缝地执行此操作（修补fancybox v1.3.x并不值得）

其次，您需要在父页面和iframed页面这两个页面中都加载jquery和fancybox css和js文件，以便正确地超越fancybox，

因此在两个页面中，您至少应具有以下内容：

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

和

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

然后在您的iframed（子页面）页面中，您的脚本基本上是相同的（但具有适用于v2.x的fancybox选项…请在此处查看文档）

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

但是代替这个

        $.fancybox({

做这个：

        parent.$.fancybox({

然后fancybox将显示在父页面的iframed页面的边界之外

2020-05-10