2

ドメインAの親iFrameを、ドメインBのウィンドウからのpostMessageによってトリガーされるpostMessageイベントハンドラーからフルスクリーンにする必要があります。postMessage通信は完全に設定されています。「allowfullscreen」属性はiframeにも設定されています。しかし、requestFullScreen（）メソッドは黙って終了しているようです。検索したところ、セキュリティ上の理由から、requestFullScreenはマウスクリックやキープレスなどのイベントのイベントハンドラーでのみ機能することがわかりました。jqueryclick（）を使用してiFrameのクリックを強制的に実行しようとしましたが、クリックハンドラーにも入りますがrequestFullScreen動作しません。iFrameを直接クリックしてみたところ、全画面表示になりました。

これを機能させるにはどうすればよいですか？

これが私のコードです-domainAの親用です。 ドメインBの子がメッセージを投稿するときに、メッセージ投稿ハンドラーが実行されることを確認しました

<!DOCTYPE HTML>
<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
    var container;
    $(function(){
        container = $('#parentFrame')[0];
        container.addEventListener("click",goFullScreen);
        window.addEventListener("message", receiveMessage, false);
    });

        function receiveMessage(event)
        {
            /*  Use this code to restrict request from  only one particular domain & Port!
             Port not needed in this case*/
            if (event.origin !== "http://myChildDomain.com")
            {
                return;
            }
            /*Retrieving relevant variables*/
            var message=event.data;
            var source=event.source;
            var origin=event.origin;

            //Forcefully generating a click event because fullscreen won't work when directly requested!
            container.click();
        }

    goFullScreen = function (){
        if (container.mozRequestFullScreen) {
            // This is how to go into fullscren mode in Firefox
            // Note the "moz" prefix, which is short for Mozilla.
            container.mozRequestFullScreen();
        } else if (container.webkitRequestFullScreen) {
            // This is how to go into fullscreen mode in Chrome and Safari
            // Both of those browsers are based on the Webkit project, hence the same prefix.
            container.webkitRequestFullScreen();
        }
    }

</script>
<body>
<iframe id="parentFrame" src="http://myChildDomain/child.html" width="804" height="600" frameborder="0"  scrolling="no" allowfullscreen style="border: 5px solid #00ff00">
</iframe>
</body>
</html>
4

0 に答える 0