0

これは、リモート ドメインから外部ページをロードするために使用される親ページのコードですが、iframe ページの閉じるリンクをクリックしても閉じられません。どこが間違っているのでしょうか。

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

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

    <script type="text/javascript">
        $(document).ready(function() {

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'http://2792.a.hostable.me/testing/instagram/tester.php',
                    type : 'iframe',
                    padding : 5 
                });
            });

        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>
</head>
<body>
<a id="fancybox-manual-b" href="javascript:;">Open single item, custom options</a>
</body>
</html>

リモートページのコードは次のとおりです

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - iframe demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>fancyBox - iframe demo</h1>

    <p>
<a href="javascript:parent.$.fancybox.close();">Close me</a>

        |

        <a href="javascript:parent.document.returnval('asdf');">return some value</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque justo ac eros consectetur bibendum. In hac habitasse platea dictumst. Nulla aliquam turpis et tellus elementum luctus. Duis sit amet rhoncus velit. Duis nisl ligula, mattis interdum blandit laoreet, mattis id ante. Cras pulvinar lacus vitae nisi egestas non euismod neque bibendum. Vestibulum faucibus libero id ante molestie ultricies. Vestibulum quis nibh felis. Vestibulum libero nisl, vehicula vel ullamcorper sit amet, tristique sit amet augue. Etiam urna neque, porttitor sed sodales lacinia, posuere a nisl. Vestibulum blandit neque in sapien volutpat ac condimentum sapien auctor. Ut imperdiet venenatis ultricies. Phasellus accumsan, sem eu placerat commodo, felis purus commodo ipsum, sit amet vulputate orci est viverra est.
    </p>

    <p>
        Aenean velit est, condimentum ut iaculis ut, accumsan at mi. Maecenas velit mi, venenatis ut condimentum at, ultrices vel tortor. Curabitur pharetra ornare dapibus. Ut volutpat cursus semper. In hac habitasse platea dictumst. Donec eu iaculis ipsum. Morbi eu dolor velit, a semper nunc.
    </p>
</body>
</html>
4

2 に答える 2

0

あなたのコードは私にとってはうまくいきますが、iframes を扱うときは、 Same Origin Policyを考慮する必要があります。

ページを閉じようとすると、このエラーがトリガーされます

Timestamp: 08/07/2012 3:50:25 AM
Error: Permission denied to access property '$'
Source File: javascript:parent.$.fancybox.close();
Line: 1

これは、別のドメインからスクリプトを実行するために、そのホストに制限が存在する可能性があることを意味します。

ローカルでテストするか、2 つのページが同じサーバー (同じドメイン) に存在する場合、シームレスに動作します。

于 2012-07-08T10:59:51.900 に答える
0

開いているページには、fancybox JS 参照も必要です。そうしないと、それ自体を閉じようとしているコードを認識できません。

最新のブラウザーを使用している場合は、JS エラーを表示するコンソール (通常は F12 で開きます) にアクセスできる必要があります。

于 2012-07-08T09:28:07.153 に答える