在javascript中反复切换iframe滚动条

repeatedly toggle iframe scrollbar in javascript

本文关键字：iframe 滚动条 javascript      更新时间：2023-09-26

为了避免结束，是的，我已经研究了大多数相关的问题。以下是一些相关的问题，它们不是重复的，但有相同的标题：javascript中的滚动条iframe，在javascript中切换iframe滚动？我无法使那里建议的解决方案发挥作用。现在让我们开始

嗨，我需要随着内容的变化切换iframe上的滚动条。我有一些代码，我认为可以工作，但它失败了。下面的所有代码都来自http://jsfiddle.net/3nnAf/2

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

Html:

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

尝试使用"滚动"属性：

(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栏？

谢谢，用户117…

您的问题在这里：

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

同源策略阻止您与来自其他域的页面进行交互。

编辑

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

setTimeOut(toggleIFrame(), 2000);

该函数被称为：

window.setTimeout

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

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

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

  1. 至少在Chrome上，同源政策使谷歌甚至无法加载iFrame。因此，什么也没跑
  2. 您确实使用了错误的方法setTimeOut而不是setTimeout。我看到你在编辑中修复了这个
  3. 您在setTimeout调用中使用了toggleIFrame()。我看你也抓到这个了

此代码在'hidden'和'' 之间正确切换飞越Y

(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被正确地切换了——但这并没有产生所需的效果。我承认这一点。

随着代码中主要的停止显示问题的解决，也许切换滚动条的其中一个答案现在对你有用。

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

  • 扩展iframe扩展以适应中的所有内容

  • 添加了一个div包装器，我可以添加和删除滚动条

完成的代码如下。。。

HTML

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

脚本

(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 上的回答

相关文章：