Question

我尝试使用此代码全屏打开html页面。但我想在没有iframe的情况下全屏打开另一页。（即如果我点击按钮而不是浏览器进入全屏并在同一窗口中打开www.google.com。）

这是我的代码

<html>
<head>
    <meta charset="UTF-8" />
    <title>jQuery Fullscreen Plugin demo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.fullscreen-min.js"></script>
    <style>
        width:90%;
        height:90%;
    </style>
    <style>
        #form
        {
            width:100%;
            height:100%
        }
    </style>
    <script>
        function redirect()
        {
            $('#form').bind('click', function() {
                var $this = $(this);
                var outputHolder = $("<div id='.uimodal-output'></div>");
                $("body").append(outputHolder);
                outputHolder.load($this.attr("href"), null, function() {
                    outputHolder.dialog(// whatever params you want);
                });
                return false;
            });
        }
    </script>
</head>
<body style="background:white">
    <h1>jQuery Fullscreen Plugin demo</h1>
    <div id="form" style="display: none;">
        <h1>blah blah blah</h1>
    </div>
    <div id="buttons">
        <button onclick="func1();">Enter Fullscreen mode (Form)
        </button>
    </div>

    <script>
        function func1(){
            $('#form').fullScreen(true)
            var url = "http://www.google.com";    
            //  $(location).attr('href',url);
            show();

            function show() {
                if(document.getElementById('form').style.display=='none') {
                    document.getElementById('form').style.display='block';
                }
            }
        } 
    </script>

    <script type="text/javascript">

        $(function() {

            $(".fullscreen-supported").toggle($(document).fullScreen() != null);
            $(".fullscreen-not-supported").toggle($(document).fullScreen() == null);

            $(document).bind("fullscreenchange", function(e) {
                if ($(document).fullScreen())
                {
                    document.getElementById('form').style.display='block';
                }
                else
                {
                    document.getElementById('form').style.display='none';
                }
            });
        });
    </script>
</body>
 </html>

Answer 1

您可以将此插件用于jQuery：

http://dawdeza.blogspot.com.es/2013/05/pon-tus-paginas-pantalla-completa-con.html#more

Answer 2

这可能是因为

var url = "www.google.com";

我认为因此，您的页面会导航到google.com。如果你想把它放在当前页面上，你可以尝试下面的行而不是前一行

var url = "${pageContext.request.contextPath}/myParentFolder/myChildFolder/myHTML.html";

希望这对你有所帮助。

jquery在没有iframe的情况下全屏打开页面

2 个答案: