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 スクロールバーを繰り返しオン/オフすることはできますか?

ありがとう、User117...

4

2 に答える 2

0

あなたの問題はここにあります：

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

同一オリジン ポリシーにより、別のドメインのページとやり取りすることができなくなります。

編集

ああ、私が悪い、私が悪い。

setTimeOut(toggleIFrame(), 2000);

関数は次のように呼び出されます。

window.setTimeout

（あなたのエラーコンソールはあなたにそれを言ったでしょう、ところで。）

EDIT 2 OK、実際にコードを実行して、いくつかの変更を加えました。

コードが正しく実行されない 3 つの大きな問題がありました。

  1. 少なくとも Chrome では、Same Origin ポリシーにより、Google が iFrame に読み込まれることさえありませんでした。したがって、何も実行されませんでした。
  2. setTimeOutoverの方法が間違っていましたsetTimeout。編集でこれを修正したことがわかります。
  3. あなたは呼び出しで使用toggleIFrame()していました。setTimeoutあなたもこれを捕まえたようです。

'hidden'このコードは、overflowY をとの間で正しく切り替えます。''

(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 は正しく切り替えられていますが、期待どおりの結果が得られていません。私はそれを認めます。

コード内の主要なショー ストッパーが解決されたので、おそらく、スクロール バーの切り替えに関する答えの 1 つがうまくいくでしょう。

于 2013-07-10T23:26:34.170 に答える
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/で実際の動作を確認してください。

参考文献:コンテンツに合わせて iframe の幅と高さを調整する での Ahmy の回答

于 2013-07-11T03:28:05.420 に答える