时间戳

首页 > 解决方案 > 使用自己的脚本更改 iFrame 大小

javascript - 使用自己的脚本更改 iFrame 大小

问题描述

我的问题很简单，我有iframe两个按钮和一些 JavaScript 代码。当我单击这些按钮时，我想iframe使用它自己的脚本来调整它的大小。我找不到任何教程。但是我不为此使用 jQuery。

我尝试了几种方法来获取iframe对象没有任何效果。有没有可能与跨浏览器兼容的方法？这是一个不好的做法吗？

主 html 页面

<html>
    <head>
        <title>Main Page</title>
        <style>
            iframe{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <iframe src="pages/widget.html" height="150" width="150" id="iframe1">
    </body>
</html>

iFrame

<html>
    <head>
        <title>Main Page</title>
    </head>
    <body>
        <button onclick="setSize1()">Maximize</button>
        <button onclick="setSize2()">Minimize</button>
        <script>
            function setSize1(){
                //get iframe object
                iframe.style.height="300px";
            }

            function setSize2(){
                //get iframe object
                iframe.style.height="150px";
            }
        </script>
    </body>
</html>

标签： javascriptiframe

解决方案

你不能只使用 JavaScript：

<script>const beer = {
name: 'Belgian Wit',
metric: 10,
keywords: ['pale', 'cloudy', 'spiced', 'crisp'] };



const markup = `<div class="beer"><h2>${beer.name}</h2><p class="brewery">${beer.metric +1}</p></div>`;  document.body.innerHTML = markup;</script>

推荐阅读