2

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