How to add and zoom to iframe code

Question

How to add and zoom to iframe code

I tried to develop an electronic newspaper application to create html embed code. he shows, but all attempts to scale it have failed. Pls below is the source code if someone can help

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

+4

javascript html html5 iframe

S-davies wande Dec 7 '15 at 12:05

source share

1 answer

Adam harris · Answer 1 · 2016-01-21T18:14:48+0000

Here is a fiddle showing how to enlarge an HTML element. This code can be easily applied to your situation by simply aiming the element inside the iframe (possibly on the body of the document).

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

here is an important function:

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

The item must be the item you want to increase, and the level should be decimal. 1.0 - the default size, 1.5 - 150%.

How to add and zoom to iframe code

More articles: