问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

通过放大缩小按钮这么样iframe内容放大缩小呢，请教一下。

头像
安好
    12412136

    通过按钮操作将iframe内容放大缩小。

    javascripthtml
    阅读 7.3k
    1 个回答
    得票最新
    头像
    一人破万军
      5817

      COPY 我这个到txt.html 打开试一下。

      <head>
<style>
#draggable { width: 800px; height: 500px; }
iframe{  width: 100%; height: 100%;}

</style>

<html>
<body>
<div>
    <iframe id="draggable" src="a.html"></iframe>
</div>
<script type="text/javascript">
var reset = false;
function Resize () {

var doc = document.getElementById("draggable").contentDocument || document.frames["draggable"].document;  
var Text=doc.getElementById("test");
//修改大小

 if (reset == true) {
     Text.style.fontSize='100px';
     reset = false;
  } else {
    Text.style.fontSize='12px';
    reset = true;
  }

};
</script>
<input type="button" onclick="Resize()" value="Resize" />
</body>

</html>
      
<html>

<html>
<head>
</head>

<body>
<div id="test">test</div>
<body>
</html>

      ===============上面这个是一个a.html======================

      图片描述
      上面框架里的内容缩放，

      下面是整框架的缩放，

      <html>
<body>
<div>
    <iframe id="draggable" src="http://www.baidu.com"></iframe>
</div>
<script type="text/javascript">
var reset = false;
function Resize () {
  var obj = document.getElementById("draggable");
  if (reset == true) {
      obj.style.height="400px";
      obj.style.width="500px";
      reset = false;
  } else {
    obj.style.height="0px";
    obj.style.width="0px";
    reset = true;
  }

};
</script>
<input type="button" onclick="Resize()" value="Resize" />
</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题