Question

为了避免结束，是的我已经查看了大部分相关问题。以下是一些不重复的相关问题，但共享相同的标题： scrollbar iframe in javascript， Toggle iframe scrolling in javascript? 我无法使建议的解决方案有效。现在开始吧

嗨，我需要在内容发生变化时切换iframe上的滚动条。我有一些我认为可行的代码，但它失败了。以下所有代码均来自http://jsfiddle.net/3nnAf/2

为了演示这个概念，我试图让一个iframe滚动条在循环中打开和关闭

HTML：

 <iframe src="www.google.com" id="Iframe" seamless scrolling="no" ></iframe>

尝试使用'scrolling'属性：

(function toggleIFrame(){
   var toggleScroll = document.getElementById('Iframe').scrolling == 'no';
   if (toggleScroll){
      document.getElementById('Iframe').scrolling = 'yes';
   }else{
      document.getElementById('Iframe').scrolling = 'no';
   }
   setTimeout(toggleIFrame, 2000);
 }());

尝试使用样式

(function toggleIFrame(){
 var toggleScroll = document.getElementById('Iframe').style.overflowY == 'scroll';
 if (toggleScroll){
    document.getElementById('Iframe').style.overflowY = 'hidden';
 }else{
    document.getElementById('Iframe').style.overflowY = 'scroll';
 } 
 setTimeout(toggleIFrame, 2000);
}());

是否可以反复打开和关闭iframe scoll bar？

谢谢， User117 ...

Answer 1

您的问题在这里：

 <iframe src="www.google.com" id="Iframe" seamless scrolling="no" ></iframe>

Same Origin Policy阻止您与其他域中的网页进行交互。

修改

哦......我很糟糕，我很糟糕。

setTimeOut(toggleIFrame(), 2000);

该函数被称为：

window.setTimeout

（你的错误控制台会告诉你，BTW。）

编辑2 好吧，我确实运行了代码并对其进行了一些更改。

您有三个主要问题导致代码无法正常运行。

至少在Chrome上，同源政策使Google无法加载到iFrame中。因此，没有任何事情发生。

您确实使用了setTimeOut超过setTimeout的错误方法。我看到你在编辑中解决了这个问题。

您在toggleIFrame()调用中使用了setTimeout。我也看到你也抓到了这个。

此代码可以正确切换'hidden'和''
之间的溢出
(function toggleIFrame2(){ var iFrame = document.getElementById('Iframe'); console.log("Starting value" + iFrame.style.overflowY ); var oldValue = iFrame.style.overflowY; function inner() { var toggleScroll = (iFrame.style.overflowY === 'hidden'); var newValue = toggleScroll ? oldValue : 'hidden' console.log(newValue); iFrame.style.overflowY = newValue; setTimeout(inner, 2000); } inner(); }());

此时，正确切换newValue - 但这并未产生所需的效果。我承认这一点。

解决了代码中的主要显示停止功能后，切换滚动条的答案之一可能现在适合您。

Answer 2

不幸的是，我无法反复切换iframe滚动条，所以我

展开了iframe展开以适应
添加了一个div包装器，我可以添加和删除滚动条

完成的代码如下......

HTML

<div id="IframeWrapper">
   <iframe src="www.google.com" id="Iframe" seamless scrolling="no" ></iframe>
</div>

SCRIPT

(function toggleIFrame(){  

autoResizeIFrame('Iframe');
var toggleScroll = $('#IframeWrapper').hasClass('showBars');

$('#IframeWrapper').removeClass('hideBars');
$('#IframeWrapper').removeClass('showBars');

if (toggleScroll){
        $('#IframeWrapper').addClass('hideBars');
}else{
        $('#IframeWrapper').addClass('showBars');
} 

window.setTimeout(toggleIFrame, 2000);
}());

function autoResizeIFrame(id){
var newheight;
var newwidth;

if(document.getElementById){
   newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
   newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

  document.getElementById(id).style.height= (newheight) + "px";
  document.getElementById(id).style.width= (newwidth) + "px";
}

CSS

#IframeWrapper {width:300px; height:300px;}
#IframeWrapper.hideBars {overflow:hidden;}
#IframeWrapper.showBars {overflow:scroll;}

在http://jsfiddle.net/3nnAf/5/

中查看此操作

参考文献：Ahmy在Adjust width height of iframe to fit with content in it

的回答

在javascript中反复切换iframe滚动条

2 个答案: