Home > Developer > Web Develop
DOM element full screen display solution, dom full screen display
<script type="text/javascript"> function goFullscreen(id) { // Get the element that we want to take into fullscreen mode var element = document.getElementById(id); // These function will not exist in the browsers that don't support fullscreen mode yet, // so we'll have to check to see if they're available before calling them. if (element.mozRequestFullScreen) { // This is how to go into fullscren mode in Firefox // Note the "moz" prefix, which is short for Mozilla. element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { // This is how to go into fullscreen mode in Chrome and Safari // Both of those browsers are based on the Webkit project, hence the same prefix. element.webkitRequestFullScreen(); } // Hooray, now we're in fullscreen mode! }</script></img><button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
This enables full screen display, but the size of DOM elements remains unchanged. Don't worry. Here we will help you solve this problem.
<style type="text/css"> .player:-webkit-full-screen { width: 100%; height: 100%; } .player:-moz-full-screen { width: 100%; height: 100%; }</style></img><button onclick="goFullscreen('player');">Click Me To Go Fullscreen! (All the way)</button>
<iframe src="iframe_src.html" width="400" height="300" allowFullScreen></iframe>
Reference: http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
For example, you need to find the XX element in the parent window.
Parent.doc ument. getElementById ('xx ')
Add a parent in front of the normal time. It indicates the parent window.
DOM sub-element issues
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Script>
Window. onload = function ()
{
Var obj = document. getElementsByTagName ("div"); // obtain all div labels
Alert (obj. length); // This shows the number of all DIV labels.
}
</Script>
</HEAD>
<BODY>
<Div> 1 </div>
<Div> 2 </div>
<Div> 3 </div>
<Div> 4 </div>
<Div> 5 </div>
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
