How to zoom IFRAME content only without using a fr

2019-03-13 15:48发布

站内问答 / HTML/CSS
1977 4 4

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>
 <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.

4条回答
干净又极端
2楼-- · 2019-03-13 16:25

Not sure this works with linked documents, but with locally hosted content the following works:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
4楼-- · 2019-03-13 16:42

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>
查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2019-03-13 16:45

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)