javascript – 如何向iframe代码添加放大和缩小功能

2023年1月18日 217次阅读

我试图开发一个电子报纸应用程序,我生成嵌入 HTML代码.它显示但所有使它变焦的尝试都证明是流产的.

如果任何人可以帮助,下面是源代码

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
        <title>Blank App Designer Packaged Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, usre-scalable=yes">
        </style>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
        <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
    </head>
    <body id="afui">
    <header class="wrapping-col wrap-element uib_w_1 with-back" data-uib="app_framework/header" data-ver="2" id="af-header-0">
    <a class="button backButton">Back</a>
            <h1>ETRIBUNE</h1>
        </header>
        <div id="content" class="uwrap">
            <div class="upage vertical-col panel" id="mainpage" data-header="af-header-0" data-footer="none">
                <iframe id="bloxFrame" src="http://static.issuu.com/widgets/shelf/index.html?folderId=e9a9ca5f-d74f-49e8-8b3d-e57b7e383f76&amp;theme=theme2&amp;rows=2&amp;thumbSize=medium&amp;roundedCorners=false&amp;showTitle=true&amp;showAuthor=true&amp;shadow=true&amp;effect3d=true"
                name="bloxFrame" width="300px" height="400px" frameborder="0" scrolling="auto">
                    &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;
                </iframe>
            </div>
        </div>
    </body>
</html>

最佳答案 这是一个显示如何缩放HTML元素的小提琴.通过简单地定位iframe内部的元素(可能是文档正文),可以轻松地将此代码应用于您的情况.

https://jsfiddle.net/xzn1s7ks/1/

这是相关的功能：

function zoom(element, level){
    if (element.style){
    if (element.style.zoom != undefined)
        element.style.zoom = level;

    if (element.style.MozTransform != undefined)
        element.style.MozTransform = 'scale(' + level + ')';

    if (element.style.WebkitTransform != undefined)
        element.style.WebkitTransform = 'scale(' + level + ')';
  }
}

元素应该是要缩放的元素,级别是十进制值. 1.0是默认大小,1.5是150％.

点赞