How to zoom IFRAME content only without using a frame set?
I need to zoom frame content only. Here in my web page I used zoom: 0.75; height: 520px; width: 800px;. If I increase the zoom value it means that the frame size will be increased.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>开发者_StackOverflow社区;
<STYLE>
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
</HEAD>
<BODY>
<IFRAME id="frame" src="http://www.google.com"></IFRAME>
</BODY>
</HTML>
In the above sample HTML page I want to zoom the content of the IFRAME without changing the size of that IFRAME.
I have used a script in my facebook and it's working in IE and Firefox
<style type="text/css">
#iframe {
zoom: 0.15;
-moz-transform:scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
</style>
<iframe src="https://www.wikipedia.org/" height="700" width="550">Wikipedia Encyclopedia</iframe>
Not sure this works with linked documents, but with locally hosted content the following works:
<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
For this you might need to use javascript.
There is a zoom plugin for jQuery here: http://css-tricks.com/examples/AnythingZoomer/
You could change the iframes src to a local web page (eg. frame.htm), place a div in the frame and use the jquery load() function to load the content into the frame:
<script type="text/javascript">
$(document).ready(function() {
$("#loadGoogle").load("pageToLoad.html", function(){
//loaded
});
})
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>
Then use the jquery zoom plugin inside the frame to zoom the content.
<script type="text/javascript">
$("#loadGoogle").anythingZoomer({
expansionSize: 30,
speedMultiplier: 1.4
});
</script>
For an updated answer this is a great guide. Cheers
http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/
加载中,请稍侯......
精彩评论