为iFrame创建缩放功能：放大和缩小

Question

为iFrame创建缩放功能：放大和缩小

javascriptcsshtmlzooming

3

我正在研究一种方法，允许用户缩放在线课程中交互式 HTML eLearning 演示文稿的大小。但是，我有很多限制：

我们的在线课程托管在不支持 HTML5 的 LMS/CMS 上。由于演示文稿采用 HTML5 格式，所以我唯一能够使其显示在页面上的方式是通过 iFrame 或 Object）。
我们使用的 LMS 仍然使用框架布局（一个头部框架[100%宽度]在顶部，然后下面有两个框架[约20%宽度的导航框架和80%宽度的内容框架]），因此我需要能够仅针对占80%宽度的主要内容框架。
我们的受众倾向于使用像上网本这样的小屏幕。

我创建的演示文稿非常大（1022 x 665），因为我直到现在才知道屏幕尺寸的限制。因此，我想添加一项功能，允许学生调整内容以适应自己的屏幕尺寸。在这种情况下，似乎最好的选择是在页面上添加两个按钮（一个 + 和 - ），供学生使用。

我找到了一种可以永久缩小页面的 CSS 方法：

<style>
 .frame
{
width: 1022px;
height: 665px;
border: 0;
overflow: hidden;

-ms-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);

-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

</style>

虽然这个方法可行，但是不允许不同屏幕尺寸的学生自定义他们的体验。

目前，我有一些JavaScript代码可以让学生仅缩放字体大小。最简单的方法是添加缩放按钮，以定位整个框架，或者在万不得已时定位对象本身。

以下是我的当前代码（以字体大小JavaScript作为起点）：

<!--WEEK 6 SELF CHECK-->
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js"></script>

<style>
.frame
{
 width: 1022px;
    height: 665px;
    border: 0;
 overflow: hidden;
 }

</style>
</head>

<body>
<div class="subPara" style="height: 80%;">

<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>

<p>Questions to think about as you are completing your readings:</p>
<!--Instructions for how to embed Self Checks-->
<div class="wrap">
    <object class="frame" type="text/html" data="EDU8510_Week6_SelfCheck/Week6.html" style="width: 1022px; height: 675px; border: 0px;">
     <embed src="EDU8510_Week6_SelfCheck/Week6.html" style="width: 645px; height: 530px; border:0;"></embed>
    </object>
</div>
</div>

<script>
var fontSize = 1;
function zoomIn() {
    fontSize += 0.1;
    document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
    fontSize -= 0.1;
    document.body.style.fontSize = fontSize + "em";
}
</script>
</body>

- CodeLyfe

因此...您无法操纵iframe中的任何内容...将框架设置为百分比是否可以实现您要找的响应式大小？例如，宽度= 100%。 - JayD

我之前尝试过。问题在于iFrame内容不是完全响应式/可缩放的。当我使用百分比进行缩放时，项目的宽度确实会改变，但高度没有改变，这才是真正的问题，因为我的客户希望所有内容都在屏幕上显示。 - CodeLyfe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3895712 · Accepted Answer

我通过在JavaScript中更改transform和scale值来实现它：

function ZoomiframeScale(){
  $('#iframe').css({
          'height':'280%',
          'width': '300%',
        '-ms-zoom': '0.3',
        '-moz-transform': 'scale(0.3)',
        '-moz-transform-origin': '0 0',
        '-o-transform': 'scale(0.3)',
        '-o-transform-origin':' 0 0',
        '-webkit-transform': 'scale(0.3)',
        '-webkit-transform-origin': '0 0'
});
}

并且

function ZoomOutIframe(){
  $('#iframe').css({
          'height':'90%',
          'width': '95%',
        '-ms-zoom': '1',
        '-moz-transform': 'scale(1)',
        '-moz-transform-origin': '0 0',
        '-o-transform': 'scale(1)',
        '-o-transform-origin':' 0 0',
        '-webkit-transform': 'scale(1)',
        '-webkit-transform-origin': '0 0'
});
}