我有一个主页。此页面有一个iframe。 iframe中加载了一个包含表格和iframe的页面。
1）我想显示主页面iframe（我可以通过检测按下＆＃39; Enter＆＃39;键执行一个功能来抓取主页面的iframe元素来执行此操作并生成一个全屏视图 - 然而背景颜色是黑色的，我无法阅读文本。我已经尝试了每个CSS解决方案来改变背景颜色。我尝试了我在这里可以找到的所有内容那个问题。请帮我找到适用于所有浏览器的解决方案。
2）除此之外，我想生成主页的iframe文档表的全屏视图，并生成主页的iframe文档的全屏视图＆＃39 ; s iframe。我无法生成主页的iframe文档表的全屏视图。我无法生成主页的iframe文档的iframe的全屏视图。请让我知道如何做到这一点。我可以使用contentWindow术语将主页面的iframe文档成功存储在一个变量中 - 但是然后使用该变量通过id命名法使用get Element访问其内容不起作用。请帮我找到一种方法来生成主页的iframe文档元素的全屏视图。
请帮助解决上述两个问题。
我的主页iframe id是＆＃34;你好＆＃34;。主页的iframe文档的表ID是＆＃34;点唱机＆＃34;。主页的iframe文档的iframe ID是＆＃34; albumcover＆＃34;。
这不是任何实际的调试用途，除了让你知道所讨论的所有元素都有id并且id代码的get元素仍然不起作用或者能够通过显示完整的函数显示元素的屏幕视图...除了在使用带有id代码的get元素时，该功能在尝试生成主页的iframe的全屏显示时显示元素的全屏视图...它只是帮助可能有助于创建有意义的例子的人。它会帮助其他人找到此网页，并按照问题的解决方案进行解决，如果他们遇到类似的问题，那么这些信息可能会让他们更好地遵循解决方案并解决他们自己的问题。
谢谢你们！
主页：
function toggleFullScreen(x, y) {
var videoElement;
var q;
var w;
if (x == 1)
{
if (y == 0)
{
q = document.getElementById("hello");
w = q.contentWindow.document;
alert("videoElement = documenttable;");
}
else if (y == 1)
{
alert("videoElement = documentalbumiframe;");
}
else if (y == 2)
{
alert("videoElement = queuetextarea;");
}
else if (y == 3)
{
alert("videoElement = songlisttextarea;");
}
}
else
{
if (y == 0)
{
videoElement = document.getElementById("hello");
}
}
if ( (x == 1) || ( (x == 0) && (y == 0) ) )
{
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
}
<iframe src="menu.html" height=549 width=100% frameborder=0 name = "hello" id = "hello" style ="overflow-x:scroll"></iframe>
iFrame的文档页面：
<table id="jukebox" border = "0">
...
<iframe id="albumcover" height=432 width=450 frameborder=0 name = "cake" style =""></></iframe>
答案 0 :(得分：0)
此演示使用Full Screen API：
fullview.js负责切换按钮状态（全屏模式/普通视图模式），并确定视口应更改的状态。index.html目标<body> jukebox.html的全屏切换定位iframe#jBox cover.html的全屏切换定位iframe#cBox 为了测试全屏功能，您必须从IDE（please see illustration）进行测试。
// fullView.js
function fullView(event) {
var btn = this;
var ele = this.id;
var tgt = document.querySelector('.tgt' + ele);
var state = btn.classList;
if (state == 'off') {
enterFS(tgt);
btn.classList.remove('off');
btn.classList.add('on');
} else {
exitFS();
btn.classList.remove('on');
btn.classList.add('off');
}
}
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Usage
/*
Requirements:
A trigger element
ex. <button>, <a>, etc.
A target element
ex. <body>, <section>, <div>, etc.
Assign an id to the trigger.
ex. <button id='btn1'></button>
Assign a specific class to the target.
There is a naming pattern:
'.tgt'+{{id of trigger}}
ex. .tgtbtn1
<body class='tgtbtn1'>
Add an eventListener() to trigger.
var btn1 = document.getElementById('btn1');
Use fullView as the eventHandler
btn1.addEventListener('click', fullView, false);
*/