我需要让 iframe 进入全屏模式， 我正在使用 iframe 通过 google 文档查看器显示 pdf 文件 我需要这个 iframe 进入全屏。 我在互联网上找到了一个用于显示 html 视频和 iframe 的代码，并且全屏显示，但是当我尝试删除视频时，全屏无法正常工作 在此代码中，iframe(全屏)不工作
<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
<title>Fullscreen API | The CSS Ninja</title>
<div class="fl">
<iframe src="http://thecssninja.com/talks/dnd_and_friends/" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
<button id="fullscreeniframe" class="button">Fullscreen iframe</button>
</div>
<script>
(function(window, document){
var $ = function(selector,context){return(context||document).querySelector(selector)};
var video = $("video"),
iframe = $("iframe"),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
var fullscreen = function(elem) {
var prefix;
// Mozilla and webkit intialise fullscreen slightly differently
for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
prefix = domPrefixes[i].toLowerCase();
if ( elem[prefix + 'EnterFullScreen'] ) {
// Webkit uses EnterFullScreen for video
return prefix + 'EnterFullScreen';
break;
} else if( elem[prefix + 'RequestFullScreen'] ) {
// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
return prefix + 'RequestFullScreen';
break;
}
}
return false;
};
// Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
var fullscreenvideo = fullscreen(document.createElement("video"));
// Webkit uses "requestFullScreen" for non video elements
var fullscreenother = fullscreen(document.createElement("iframe"));
if(!fullscreen) {
alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
return;
}
// Should add prefixed events for potential ms/o or unprefixed support too
video.addEventListener("webkitfullscreenchange",function(){
console.log(document.webkitIsFullScreen);
}, false);
video.addEventListener("mozfullscreenchange",function(){
console.log(document.mozFullScreen);
}, false);
$("#fullscreenvid").addEventListener("click", function(){
// The test returns a string so we can easily call it on a click event
video[fullscreenvideo]();
}, false);
$("#fullscreeniframe").addEventListener("click", function(){
// iframe fullscreen and non video elements in webkit use request over enter
iframe[fullscreenother]();
}, false);
})(this, this.document);
</script>
最佳答案
我已经删除了视频引用，试试看:
(function(window, document){
var $ = function(selector,context){return(context||document).querySelector(selector)};
var iframe = $("iframe"),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
var fullscreen = function(elem) {
var prefix;
// Mozilla and webkit intialise fullscreen slightly differently
for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
prefix = domPrefixes[i].toLowerCase();
if ( elem[prefix + 'EnterFullScreen'] ) {
// Webkit uses EnterFullScreen for video
return prefix + 'EnterFullScreen';
break;
} else if( elem[prefix + 'RequestFullScreen'] ) {
// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
return prefix + 'RequestFullScreen';
break;
}
}
return false;
};
// Webkit uses "requestFullScreen" for non video elements
var fullscreenother = fullscreen(document.createElement("iframe"));
if(!fullscreen) {
alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
return;
}
$("#fullscreeniframe").addEventListener("click", function(){
// iframe fullscreen and non video elements in webkit use request over enter
iframe[fullscreenother]();
}, false);
})(this, this.document);
关于javascript - iframe 进入全屏模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18901847/