このコードを使用して、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>