生成HTML元素的全屏视图时出现问题

Question

我有一个主页。此页面具有iframe。iframe中加载了一个页面，其中包含一个表和一个iframe。

1)我想要显示主页iframe (我可以通过检测按下'Enter‘键来做到这一点，该键执行一个函数，该函数获取主页的iframe元素并生成它的全屏视图--但是背景颜色是黑色的，并且我无法阅读文本。我尝试了每一种CSS解决方案来改变背景颜色。关于这个问题，我尝试了所有我能在这里找到的东西。请帮我找到一个可以在所有浏览器上运行的解决方案。

2)除此之外，我还想生成主页iframe文档表的全屏视图和主页iframe文档iframe的全屏视图。我无法生成主页的iframe文档表的全屏视图。我无法生成主页的iframe文档的iframe的全屏视图。请让我知道如何做到这一点。我可以使用contentWindow术语成功地将主页的iframe文档存储在一个变量中--但是使用get元素通过id命名来访问它的内容是行不通的。请帮助我找到一种方法来生成主页的iframe文档元素的全屏视图。

请帮助解决上述两个问题。

我的主页iframe id是"hello“。主页的iframe文档的表id是"jukebox“。主页的iframe文档的iframe id是"albumcover“。

这并不是说这是任何实际的调试用途，只是让您知道讨论的所有元素都有id，并且get Element by id代码仍然不起作用，或者能够由显示elements...except的全屏视图的函数显示。当使用get Element by id代码时，该函数与在尝试生成主页的iframe...it的全屏显示时一起显示元素的函数一起显示。它将帮助其他找到这个网页的人遵循问题的解决方案，如果他们有类似的问题，那么这些信息可能会让他们更好地遵循解决方案，并解决自己的问题。

谢谢你们！

主页：

​

  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>

​

Answer 1

SO36580875

Problems generating a full screen view of HTML elements

此演示使用Full Screen API

• 外部脚本文件fullview.js负责切换按钮状态(全屏模式/正常视图模式)，并确定视口应更改为何种状态。
• 蓝色按钮:全屏切换index.html目标iframe#cBox

按钮:全屏切换cover.html目标iframe#jBox

• Fuschia按钮:全屏切换cover.html目标

为了测试全屏功能，您必须在集成开发环境(please see illustration.)

README.md

PLUNKER

fullView.js

// 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);
*/