Maximize iFrame (so it appears to be the request p

2020-07-22 18:20发布

问题:

how can I (cross-browser compatible) maximize an iFrame so that it appears to be the page in the URL bar even though it is served from a different server?

回答1:

I guess this ought to work:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 <head>
  <title>Test page!</title>
  <style type="text/css">
     html, body {
        overflow: hidden;
        margin: auto;
        height: 100%;
        width: 100%;
     }
  </style>
 </head>
 <body>
  <iframe src="page.htm" width="100%" height="100%" frameborder="0"></iframe>
 </body>
</html>

Edit 1: You could just hide the scrollbars of the page, with the HTML and scroll=no directive
(that solution should be multi-browser)

Edit 2: Now even XHTML proof ;)

Edit 3: And finally w3 validator ok
(be sure to add scroll=no in the BODY if you run in Internet Explorer compatibility problems)



回答2:

You could set the width and height of the parent page's html and body tags to 100%, as well as the iframe tag that contains the page you want to load.



回答3:

Use javascript with the event body load to set iframe height & width to window height & width.

For example in jquery :

$(document).ready(function () {
    initIframe();
});
function initIframe() {
    $("iframe").height($(window).height());
    $("iframe").width($(window).width());
}

Tested on FF, IE and GC



标签: html css iframe