为 iFrame 创建放大和缩小功能

Question

我正在研究一种允许用户放大和缩小以调整在线课程中交互式 HTML 电子学习演示文稿大小的方法。不幸的是，我有很多限制：

我们的在线课程托管在不允许 HTML5 的 LMS/CMS 中。由于演示文稿采用 HTML5 格式，因此我可以将其显示在页面上的唯一方法是通过 iFrame 或 Object ):
我们现在使用的LMS仍然使用framed layout（一个header frame [100% width]在顶部，然后下面两个frame [about 20% width Navigation frame and 80% width Content frame]），所以我需要能够定位 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 只允许学生缩放字体大小。添加针对整个框架的缩放按钮的最简单方法是什么，或者如果所有其他方法都无法对象本身？

这是我当前的代码（以 Font-Size 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>

Answer 1

我通过更改 javascript 中的变换和缩放值来实现它：

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'
});
}

为 iFrame 创建放大和缩小功能

Create Zoom In & Out Functions for iFrame

html

javascript

css

zooming