FirefoxはjQueryの変数値を使ってSafariとChromeと異なる動作をします

Question

私はオブジェクトの計算されたスタイルを取得する素晴らしいプラグインcomputedstyle.jsを使用しています。 これは、構築された画像のように、通常はできないはずのもののCSSを操作することを可能にします。

リンクで見つかったイメージソースを取得し、ハウジングdivとイメージ自体のサイズを変更することができます。通常、イメージのサイズを知っている場合にのみそれを行うことができます。

1. 私はその後、変更されたイメージのサイズに基づいて、その周囲のiframeをサイズ画像
2. をサイズ画像
3. を構築します。

これはChromeとSafariで動作しますが、当然のことながらFirefoxではなく、私の意見では新しいInternet Explorerになりつつあります。

質問は、Firefoxに変更を通知してからiframeのサイズを変更する方法がありますか？

ChromeとSafariで正しく動作することを確認するには、http://syndex.meにアクセスしてください。そして正しくはない、Firefox。

私は何をしているのだろうかと疑問に思うなら、Tumblrs Photoset Postの既定のギャラリープレビューを削除し、それを単一のイメージに置き換えます。

if($(this).find('.html_photoset').length){ 
    $(".html_photoset").find("iframe").load(function(){ 
     var myFrame=$(this);       
     $(this).contents().find('.photoset_row:not(:first-child)').each(function(){ 
      $(this).remove(); 
     }) 
    var psPre = $(this).contents().find('.photoset_row').find('a').attr("href"); 
    $(this).contents().find('.photoset_row').children(':not(:first-child)').remove(); 
     $(this).contents().find('.photoset_row').children(':first-child').children().remove(); 
     $(this).contents().find('.photoset_row').find('a').append("<img src='"+psPre+"'alt='Cover Page' />"); 
     $(this).contents().find('img').load(function(){ 
      var myCSS = $(this).getCSS(); //this is the plugin function 
      var myY = myCSS.height.slice(0, - 2); 
      var myX = myCSS.width.slice(0, - 2); 
      $(this).closest(".photoset_row").css({height: myY}); 
      $(this).closest(".photoset_row").css({width: myX}); 
      $(this).css({maxHeight: (heightRef-0)}); 
      $(this).css({maxWidth: "auto"}); 
        //after I've made the fixes to the image, I redo it for the iframe: 
      var myCSS2 = $(this).getCSS(); 
      var myY2 = myCSS2.height.slice(0, - 2); 
      var myX2 = myCSS2.width.slice(0, - 2); 
      myFrame.height(myY2); 
      myFrame.width(myX2); 
      console.log(myY2); 
     })      
}) 
} 

Answer 1

​​jQuery docs page上のこの注意点は興味深いです：

画像

開発者が.LOADを使用して解決しようとすると、共通の挑戦（） ショートカットに使用される負荷のイベントの注意事項イメージ（または イメージのコレクション）が完全に読み込まれたときに関数を実行することです。いくつかの注意点がありますが、これは注意する必要がある です。これらは次のとおりである：

それは一貫して動作も確実にクロスブラウザ

ていませんそれはない

前の画像SRCが同じSRCに設定されている場合は、WebKitの中で正しく起動しません。正しくバブルアップDOMツリー

は、これらのいくつかを試してみて、軽減するために、すでにので、ブラウザのキャッシュに

をライブ映像のために火を中止することができる、私はトンをしようと示唆しています

var psPre = $(this).contents().find('.photoset_row').find('a').attr("href") + '?' + (Math.random() * 1000000);