鍍金池/ 問(wèn)答/HTML/ 通過(guò)放大縮小按鈕這么樣iframe內(nèi)容放大縮小呢，請(qǐng)教一下。

通過(guò)放大縮小按鈕這么樣iframe內(nèi)容放大縮小呢，請(qǐng)教一下。

通過(guò)按鈕操作將iframe內(nèi)容放大縮小。

回答
編輯回答
寫榮

COPY 我這個(gè)到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>

===============上面這個(gè)是一個(gè)a.html======================

圖片描述
上面框架里的內(nèi)容縮放，

下面是整框架的縮放，

<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>
2017年2月27日 05:26