iframeにアクセスしてjQueryに影響する方法

Question

ドキュメントに埋め込まれたiframeをslideDownしようとしています。 iframeには別のウェブサイトが含まれています。私はこれまでのところ、このスレッドを見てきました：

Can we do fade in and fade out in iframes

が、増加不透明度の技術では、アニメーションをスライドには適用されません、それはIFRAMEのCSSを変更することの問題に対処していません。これは、（IFRAMEのIDは「スケッチブック」である）、これまでに私のコードです：

var skpad = document.getElementById('sketchpad').contentDocument; 
    var skpad$ = $(skpad); 
    $('.sketchBtn').bind('click', 
     function() { 
      alert(skpad$); 
      skpad$.slideDown(300); 
     } 
    ); 

私もこの試みた：

skpad$.css({ 
      display:'block' 
      }) 
      .animate({ 
      opacity:'1.0',    
      },300); 

底がダウンしたスライドではありませんが、私はちょうどしようとしていたがそれがうまくいくかどうかを確認してください。それはしませんでした。何か案は？

Answer 1

このクロスドメインを行う場合は、iframeのSRCでコンテンツを制御できる場合にのみが可能です。しかし、私はあなたがiframeのSRCの内容を制御できれば、あなたはちょうどそこにslideDownコードを書いたでしょうと思います。

JavaScriptは、Same-Originを共有していない場合、外部ページのjavascriptがiframeページのcontentWindowまたはDOM（またはグローバル状態）にアクセスできないというポリシーを持っています。この場合の起点は、host + domainが一致することを意味します。たとえば、www.domain.comはstatic.domain.comとは異なります。同じ起源はまた、プロトコルが一致することを意味する。

偶然、iframeのコンテンツを制御する場合は、slideDownをDOM Readyに追加するだけです。あなたが本当に気に入らなければならない場合は、window.postMessageを実装して、子供のIframeにスクロールするように通知することができますが、それはちょうど過度の可能性があります。

タグをアニメーション化し、内側のコンテンツだけを残しておくのが最も良い方法です。おそらく、親ページの背景と同じ色の<div>がスクロールダウンを効果的にシミュレートするの上にスクロールするトラックがありますか？