Question

我需要在域A上创建父iFrame从其postMessage事件处理程序全屏显示，该事件处理程序由域B中的窗口的postMessage触发。我完全具有postMessage通信设置。 “allowfullscreen”属性也在iframe上设置。但是requestFullScreen（）方法似乎默默地退出。搜索后我发现由于安全原因，requestFullScreen仅适用于鼠标点击等事件的事件处理程序，我尝试使用jquery click（）强行执行iFrame上的点击，它也进入了click处理程序，但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>

使用PostMessage处理程序跨域iFrame RequestFullScreen

0 个答案: