私は物事の開発側の完全な初心者であり、助けていただければ幸いです。
ブラウザのサイズが変更されたときにページ全体を更新する次のコードがあります。
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
ただし、ページ全体ではなく、一意の ID を持つ特定の iframe を対象に更新する必要があります。
繰り返しになりますが、ご協力いただきありがとうございます。
4808 次
2 に答える
5
使用する：
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
複数の iFrame がある場合は、ID の代わりにクラスを使用することを検討してください。
于 2013-01-03T12:23:49.493 に答える
1
Facebook ソーシャル ウィジェットに問題があり、これで問題が解決することを期待していました。あなたのコードは役に立ちました (良いスタートです)。
とはいえ、うまくいきませんでした。
解決策が見つかったら投稿します。Facebook は本当にウィジェットを更新する必要があります。レスポンシブ サイト (モバイル デバイス) では実際に問題があります。彼らが React コードを作成したことを考えると、実際にはあまりよく書かれていません。
対象となる ID がなかったので jQuery の方が良い解決策のようですが、問題は iframe の奥深くにあります。
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));更新... この件に関して、よく書かれたこれらの 2 つのページを見つけました。うまくいけば、うまくいきます。
アップデート
上記のコードは素晴らしいものですが、ロックンロールする準備ができていませんでした。彼らのサイトの例を示しており、ほぼ動作するようになりましたが、コードにはまだバグがあります.
それで...
これは完全に不正行為ですが、ソース コードを見て、Facebook から iframe の場所を開いたところ、実際に機能しました (許可されているようです)。これまでのところ、他のプロファイルでも機能するようです (最初に許可を与える限り)。
JavaScriptコードを使用するのではなく、iframeをハードコーディングしました。また、この方法で 1000 倍高速に動作し、すでに応答性があります。Facebook のコードを修正するのにこれほど多くの時間を費やしたのは気が遠くなるようなことです。iframe で直接の URL リンクを使用すると、読み込みが高速になります (geezzz)。
最終的な URL に使用したものの例を次に示します (不要なパラメーターをクリーンアップしました。
繰り返しますが、これが機能するためには、最初に Facebook でソーシャル ボックスを作成して、許可を与える必要があることに注意してください。私は自分の個人的なユーザー名でそれをやろうとしましたが、これまで作成したことがなかったため、うまくいきませんでした. 繰り返しますが、これは理論上の話ですが、理にかなっています。私の実際のサイトでは別のクライアントを使用しており、他のクライアントもテストしました。それはうまくいくようです。
ライブ サイトで動作するという保証はありません。スクリプトを介して Facbook を使用しないユーザーをブロックする可能性がありますが、それはわかります。Facebook はコード内のスクリプトを使用してロケーション ソースをチェックする可能性があると推測しているため、この方法は時間の経過とともに失敗する可能性があります (まだわかりません)。また、私が気付かなかった (または削除した) スクリプトから Facebook が生成した必要なキーが見つからない可能性もあります。必要以上に入れないように細心の注意を払いました。様子を見よう。
とにかく、ソースコードを介して独自のテストを試してください。私は他のもっと重要なことに取り組む必要があります.これは機能し、シンプルで非常に効果的なソリューションのようです. それが失敗した場合、私は後でもっと時間がかかります。クライアントは気づかず、繰り返しますが、より高速で、よりうまく機能しているように見えます.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>もう1つの更新。
うまくいっているようですが、幅のパラメーターの URL に更新を送信する必要があります。また、ソーシャル ウィジェットの最大幅は 500px であることに注意してください (したがって、より大きなものが必要な場合は、CSS で何らかの変換を使用しない限り、それ以上にはなりません)。
これが最終的なコードです。
このすべてについて面白いことに、私は完全に戻ってきました。上記で説明したコードの一部と、私が見つけて書いた新しいコードを使用しています。
:)
また、StackOverflow コンソールでエラーが発生していることに気付きました。
無視してください。このエラーは、StackOverflow が気に入らない Facebook を呼び出す iframe 参照と関係があります。私が知る限り、エラーはありません。
私が間違っている場合は、お知らせください。
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>于 2018-02-26T22:42:57.570 に答える