Javascript 创建放大&；iFrame的Out函数

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

• 我们的在线课程托管在不允许HTML5的LMS/CMS中。由于演示文稿采用HTML5格式，因此我可以通过iFrame或Object将其显示在页面上的唯一方法是：
• 我们正在使用的LMS仍然使用框架布局（顶部有一个标题框[100%宽度]，然后下面有两个框[20%宽度的导航框和80%宽度的内容框]），因此我需要能够只针对80%宽度的主内容框
• 我们的人口倾向于使用更小的屏幕，比如上网本

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

我发现了一个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>

框架
{
宽度：1022px；
身高：665px；
边界：0；
溢出：隐藏；
-ms变换：比例（0.8）；
-moz变换：比例（0.8）；
-o变换：标度（0.8）；
-webkit变换：比例（0.8）；
变换：比例（0.8）；
-ms变换原点：0；
-moz变换原点：0；
-o变换原点：0；
-webkit转换原点：0；
变换原点：0；
}

虽然这是可行的，但它不允许不同屏幕大小的学生定制他们的体验

在这一点上，我有一些JavaScript，它只允许学生缩放字体大小。添加针对整个帧的缩放按钮的最简单方法是什么，或者如果所有其他方法都失败了，对象本身是什么

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

框架
{
宽度：1022px；
身高：665px；
边界：0；
溢出：隐藏；
}
完成阅读时需要思考的问题：

var-fontSize=1；
函数zoomIn（）{
fontSize+=0.1；
document.body.style.fontSize=fontSize+“em”；
}
函数zoomOut（）{
fontSize-=0.1；
document.body.style.fontSize=fontSize+“em”；
}

我通过更改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'
});
}

及

---

所以…你不能在iframe中操纵任何东西。。。将框架设置为百分比不会达到您想要的响应大小吗？宽度=100%，我以前试过。问题在于iFrame内容没有完全响应/可伸缩。当我使用%进行缩放时，项目的宽度会发生变化，但高度不会发生变化，这才是真正的问题，因为我的客户想要折叠上方的所有东西。

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