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