0

为了避免关闭，是的，我已经查看了大多数相关问题。以下是一些不重复但标题相同的相关问题： 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>

尝试使用“滚动”属性：

(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...

4

2 回答 2

0

不幸的是，我无法反复切换 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 在调整 iframe 的宽度高度以适应其中的内容时的回答

于 2013-07-11T03:28:05.420 回答
0

你的问题在这里：

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

同源策略阻止您与来自另一个域的页面进行交互。

编辑

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

setTimeOut(toggleIFrame(), 2000);

该函数被调用：

window.setTimeout

（你的错误控制台会告诉你，顺便说一句。）

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

您遇到了三个主要问题，导致代码无法正常运行。

  1. 至少在 Chrome 上，Same Origin Policy 使 Google 甚至无法加载 iFrame。因此，什么也没跑。
  2. 你确实有错误的方法setTimeOutover setTimeout。我看到你在编辑中修复了这个问题。
  3. 您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 被正确切换——但这并没有产生预期的效果。我会承认这一点。

解决了代码中的主要显示停止器后，也许切换滚动条的答案之一现在对您有用。

于 2013-07-10T23:26:34.170 回答