タグ付けされた質問 「iframe」

「iframe」は、ドキュメント内に「インラインフレーム」を作成するHTML要素です。これにより、同じページに別のドキュメントを表示できます。

13
ブラウザでのiframeキャッシュの防止
FirefoxとSafariがiframeコンテンツをキャッシュしないようにするにはどうすればよいですか? 別のサイトのページへのiframeを含む単純なWebページがあります。外側のページと内側のページの両方に、キャッシュを防ぐためのHTTP応答ヘッダーがあります。ブラウザの「戻る」ボタンをクリックすると、外側のページは正しく機能しますが、何があっても、ブラウザは常にiframeページのキャッシュを取得します。IEは問題なく動作しますが、FirefoxとSafariが問題を引き起こしています。 私のウェブページは次のようになります。 <html> <head><!-- stuff --></head> <body> <!-- stuff --> <iframe src="webpage2.html?var=xxx" /> <!-- stuff --> </body> </html> var変数は常に変化します。iframeのURLが変更されたという事実にもかかわらず(したがって、ブラウザーはそのページに対して新しい要求を行う必要があります)、ブラウザーはキャッシュされたコンテンツをフェッチするだけです。 HTTPリクエストとレスポンスを行ったり来たりして調べたところ、外側のページにが含まれていても<iframe src="webpage2.html?var=222" />、ブラウザはフェッチすることに気付きましたwebpage2.html?var=111。 これが私がこれまでに試したことです: ランダムなvar値でiframeURLを変更する Expires、Cache-Control、およびPragmaヘッダーを外部Webページに追加する Expires、Cache-Control、およびPragmaヘッダーを内部Webページに追加する 同一生成元ポリシーによってブロックされているため、JavaScriptのトリックを実行できません。 アイデアが足りなくなりました。ブラウザがiframeコンテンツをキャッシュしないようにする方法を知っている人はいますか? 更新 ダニエルが別のテストを実行するように提案したので、Fiddler2をインストールしましたが、残念ながら、それでも同じ結果が得られます。 これは私が実行したテストです: 外側のページはMath.random()、JSPで使用して乱数を生成します。 外側のページは、Webページに乱数を表示します。 外側のページはiframeを呼び出し、乱数を渡します。 内側のページには乱数が表示されます。 このテストでは、どのページが更新され、どのページがキャッシュされているかを正確に確認できます。 ビジュアルテスト 簡単なテストのために、ページを読み込んで別のページに移動し、[戻る]を押します。結果は次のとおりです。 元のページ: 外側のページ:0.21300034290246206 内側のページ:0.21300034290246206 ページを離れて、反撃する: 外側のページ:0.4470929019483644 内側のページ:0.21300034290246206 これは、外側のページがURLの異なるGETパラメーターを使用して呼び出している場合でも、内側のページがキャッシュされていることを示しています。何らかの理由で、ブラウザはiframeが新しいURLを要求しているという事実を無視しています。古いものをロードするだけです。 フィドラーテスト 案の定、フィドラーは同じことを確認しています。 (ページをロードします。) 外側のページが呼び出されます。HTML: …

9
クロスドメインiframeサイズ変更
別のドメインのiframeのサイズを変更するにはどうすればよいですか -編集 いくつかの解決策については下にスクロールしてください..またはこれを行わない方法を読んでください:D 何時間にもわたるコードハッキングの後、結論として、私のドメインでレンダリングされるスクロールバーでさえ、iframe内のすべてにアクセスできなくなりました。私は無駄に多くのテクニックを試しました。 時間を節約するために、このルートをたどらないでください。クロスドメイン通信にはsendMessagesを使用してください。 私が使用しているHTML <5のプラグインがあります-良い例については一番下に移動してください:) 過去数日間、私はiframeをサイトに統合しようとしています。これは、反対側が開発してAPIを開発している間の短期的な解決策です(数か月かかる可能性があります...)そして、これは短期的な解決策であるため、easyXDMを使用したいと思います-私は他のドメインにアクセスできますが、 p3pヘッダーをそのまま追加..... 3つのiframe 私が見つけた最も近い解決策は3つのiframeでしたが、それはクロムとサファリの精神に影響するため、それを使用することはできません。 クロームで開く http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179 スクロールバーを測定する scrollheightを使用してフォームのサイズを変更する方法に関する別の投稿を見つけました。理論的にはうまく機能しますが、iframeのスクロールの高さを使用して適切に適用できませんでした。 document.body.scrollHeight それは明らかに体の高さを使用します(これらのプロパティに100%アクセスすることはできません100%はクライアントの表示canvazに基づいており、xドメインのドキュメントの高さではありません) jqueryを使用してiframeの高さを取得してみました $('#frameId').Height() $('#frameId').clientHeight $('#frameId').scrollHeight クロムとは異なる戻り値、つまり-またはまったく意味がありません。問題は、フレーム内のすべてが拒否されることです-スクロールバーも... 計算されたスタイル しかし、iframeのクロムを調べて要素を表示すると、iframe内のドキュメントの寸法が表示されます(jquery x-domainを使用してiframe.heighを取得します-アクセスが拒否されました)計算されたCSSには何もありません さて、クロムはそれをどのように計算しますか?(edit-browserは、組み込みのレンダリングエンジンを使用してページを再レンダリングし、これらすべての設定を計算しますが、クロスドメイン詐欺を防ぐためにどこにも添付されていません。 HTML4 HTML4.xの仕様を読みましたが、document.elementを介して読み取り専用の値を公開する必要があると書かれていますが、jqueryを介してアクセスが拒否されています プロキシフレーム ユーザーがiframeを介してログインし、プロキシが実際のコンテンツではなくログインページを取得するまで、サイトをプロキシして、どちらが問題ないかを計算するというルートをたどりました。また、ページを2回呼び出すことは受け入れられない人もいます http://www.codeproject.com/KB/aspnet/asproxy.aspx http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/ ページを再レンダリングする ここまでは行きませんでしたが、ソースを調べてソースファイルに基づいてページを再レンダリングするjscriptエンジンがあります。しかし、それらのjscriptをハッキングする必要があります..そしてそれは営利団体にとって理想的な状況ではありません...そしていくつかは純粋なJavaアプレットまたはサーバーサイドレンダリングを含みます http://en.wikipedia.org/wiki/Server-side_JavaScript http://htmlunit.sourceforge.net/ <-java not jscript http://maxq.tigris.org/ 2013年9月の更新を編集 これはすべて、HTML5ソケットで実行できます。しかし、easyXDMは、HTML5以外の苦情ページの優れたフォールバックです。 解決策1非常に優れた解決策! easyXDMの使用 サーバー上で、次の形式のページを設定します。 <html> <head> <script src="scripts/easyXDM.js" type="text/javascript"></script> …

10
jqueryはロード時にiframeコンテンツの高さを取得します
main.phpのiframe内にロードしているヘルプページhelp.phpがあります。iframeにロードされた後、このページの高さを取得するにはどうすればよいですか? iframeの高さを100%または自動にスタイル設定できないため、これを求めています。だから私はjavascriptを使う必要があると思います。私はjQueryを使っています CSS: body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } JS: $(document).ready(function () { …
84 jquery  iframe  height  onload 

12
HTMLiframe-スクロールを無効にする
私のサイトには次のiframeがあります。 <iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe> そして、それはスクロールバーを持っています。 それらを取り除く方法は?
84 html  css  iframe 

12
iframeが読み込まれているか、コンテンツが含まれているかを確認するにはどうすればよいですか?
id = "myIframe"のiframeがあり、そのコンテンツをロードするコードがあります。 $('#myIframe').attr("src", "my_url"); 問題は、ロードに時間がかかりすぎることもあれば、非常に速くロードされることもあります。したがって、「setTimeout」関数を使用する必要があります。 setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe').attr("src",""); //stop loading content } },5000); 私が知りたいのは、iFrameがロードされているかコンテンツが含まれているかを確認する方法だけです。使用iframe.contents().find()は機能しません。使えませんiframe.load(function(){})。

4
リクエストヘッダーをiframesrcリクエストに追加することは可能ですか?
JavaScriptでAJAX呼び出しを行うときに、HTTPリクエストヘッダーを非常に簡単に設定できることを理解しています。 ただし、スクリプトを介してiframeをページに挿入するときにカスタムHTTPリクエストヘッダーを設定することもできますか? <iframe src="someURL"> <!-- is there any place to set headers in this? -->


11
プログラムで作成された<iframe>のドキュメントオブジェクトにアクセスしようとしたときに「アクセスが拒否されました」JavaScriptエラー(IEのみ)
JavaScriptを使用して&lt;iframe&gt;要素を作成し、それをDOMに追加する必要があるプロジェクトがあります。その後、&lt;iframe&gt;にコンテンツを挿入する必要があります。これは、サードパーティのWebサイトに埋め込まれるウィジェットです。 ページをロードしたくないので、&lt;iframe&gt;の「src」属性を設定しません。むしろ、CSSに遭遇したり、JavaScriptが親ページと競合したりしないように、挿入したコンテンツを分離/サンドボックス化するために使用されます。JSONPを使用してサーバーからHTMLコンテンツをロードし、この&lt;iframe&gt;に挿入しています。 私はこれを正常に機能させていますが、1つの重大な例外があります-document.domainプロパティが親ページ(このウィジェットがデプロイされている特定の環境にある可能性があります)、Internet Explorer(おそらくすべてのバージョンですが、私は6、7、および8)で確認したところ、作成したこの&lt;iframe&gt;のドキュメントオブジェクトにアクセスしようとすると、「アクセスが拒否されました」というエラーが表示されます。私がテストした他のブラウザ(すべての主要な最新のブラウザ)では発生しません。 Internet Explorerでは、相互に通信するすべてのウィンドウ/フレームのdocument.domainを同じ値に設定する必要があることを認識しているため、これはある程度意味があります。ただし、アクセスできないドキュメントにこの値を設定する方法を知りません。 誰かがこれを行う方法を知っていますか?どういうわけか、この動的に作成された&lt;iframe&gt;のdocument.domainプロパティを設定しますか?それとも私はそれを正しい角度から見ていません-この問題にぶつかることなく私が目指していることを達成する別の方法はありますか?分離/サンドボックス化されたウィンドウはこのウィジェットの機能にとって重要であるため、どのような場合でも&lt;iframe&gt;を使用する必要があります。 これが私のテストコードです: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;Document.domain Test&lt;/title&gt; &lt;script type="text/javascript"&gt; document.domain = 'onespot.com'; // set the page's document.domain &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph above the &amp;lt;iframe&amp;gt;.&lt;/p&gt; &lt;div id="placeholder"&gt;&lt;/div&gt; &lt;p&gt;This …

5
2つのiframeを比較して違いを視覚的に取得する方法は?
ケース: 私には2つのiframeがあり、両方に多くのdivと他のコントロールがあるので、両方のiframeは中規模のHTML Webサイトのようなものです。両方を比較して違いを見つけたいです。 私はここでさまざまなオプションを考えました: 解決策1: 2つのiframeの完全なスクリーンショットを取り、スクリーンショットの不一致領域にグリッドを描画するPythonの枕ライブラリを使用して両方のスクリーンショットを比較します。しかし、ここで問題となるのは、iframeの完全なスクリーンショットを撮ることができるコードがインターネット上で見つからなかったことです(スクロールバー付きの長いiframeがあります)。私はSOでほぼすべての答えを試しましたが、すべては通常のページで機能していますが、iframeでは機能しません。 リファレンス:https : //blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196 解決策2:何らかの方法ですべてのHTMLコードをiframeから取得して比較しますが、2つのiframeで異なるまたは不一致のHTMLコードが見つかるため、結果を分析するのは簡単ではありません。これはテキスト比較のようなものであり、私が信じている良い解決策ではありません。 したがって、PythonまたはJavaScriptを使用してiframeの完全なスクリーンショットを撮ることができるコード、または 2つのiframeを比較して違いを見つけることができるいくつかのより良いオプションを探しています。 私は以下のようにグーグルが見つけるほとんどすべての答えを試しました: :全体のHTMLはインラインフレーム内にあるどこサンプルインラインフレームをここに与えられているhttps://grapesjs.com/demo.html、いくつかのコードは、このIFRAMEのフルスクリーンショットを撮ることができた場合は、私のために、比較しやすいだろう。

2
iframeでwindow.location.replaceを使用できますか?
履歴window.location.replaceを回避し、ページをリロードせずにページ上のアンカーをターゲットにするために使用できますが、iframeではできませんか? 問題は、CSP(コンテンツセキュリティポリシー)違反、状態をscript-src 'unsafe-inline'有効にする必要があります。CSPを定義していない場合を除いて、CSPを定義して許可しscript-src 'unsafe-inline'ても、同じ違反エラーが発生します。ie11 / chrome / ffでも同じ結果になります。 同じドメイン(同じディレクトリ内)の iframe 。 コンソールでiframeをターゲットにして、コンソールで使用window.location.replace('/samepage.html#onpage_anchor')します。 できます。 これは、ページをリロードすることなく、履歴なしでページ上のアンカーをターゲットにします。 同じコードをアンカーリンクにインラインで配置すると機能します。 外部スクリプトで同じコードを使用すると、csp違反エラーが発生します。 これは、iframe内でなくても正常に機能します。 私は、CSPを作成しようとしたアクションを許可しますが、いなくても、最も寛容なコンテンツセキュリティポリシー可能性は、それを可能にします。 編集:複数のファイルを許可する例をプランカーにまとめて、親/子ページを参照する適切なhrefを使用できるようにします。 プランカーの例に関するメモ: 問題はこれらの例では再現されません。 スクリプトは、iframeでも完全に機能します。ただし、同じコードがローカルサーバーで機能しないか、VPSでライブ実行すると機能しません。 プランカーはある種の抽象化レイヤーを介してブラウザーにコンテンツを提示しているため、CSP違反はプランカーでトリガーされないのではないかと思います。 親のアコーディオンリンクを初めてクリックすると、更新されます。これは、ページが最初にロードされる方法がindex.htmlを参照しないためです。以降のクリックは、ページをリロードしなくても期待どおりに機能します。最初はchild.htmlを参照するため、iframeの問題ではありません これらは、コードを機能させるために変更を必要とせずにコードを表示するのに適した例です(下記のStackoverflowスニペットで機能させるためにhrefを変更する必要がある場合など)。また、javascriptが正常に機能していることも示しています。しかし、それは実際の問題を示していません。実際の問題を確認するには、エディターにロードしてローカルサーバーまたはライブホスティング環境で実行する必要があります。 プランカーの例 スクリプトあり: 履歴 なしスクリプトなし: 履歴あり 簡略化されたコード例 1つのエントリを持つ単純なアコーディオン。問題を再現するのに十分です。 開く/閉じるをクリックすると、アコーディオンが展開/折りたたまれます。JSは必要ありません。JSはまったく同じことを行いますが、履歴はありません。正常に機能しますが、iframeでは機能しません。 コードスニペットのメモ: スニペットを実行して、私が説明していることについてのアイデアを得ることができますが、実際には問題を示していません。 スニペットは実際のブラウザのように動作せず、JavaScriptは機能しません。 スニペットはコードを示していますが、問題を確認するにはiframeで実行する必要があります。iframeの外で実行して、違いとその動作を確認します。 リンクがJSでどのように機能するか(URL全体を置き換える)のため、スニペットに表示されるのと同じようにリンクするのではなく、 実際にはこのようにする必要があります(スニペットの実際のHTMLページをターゲットにすることはできません)。あなたがあれば、あなたのエディタでこれを試してください(行ってください)、その後、することを忘れないでください、この形式へのリンクを変更し、彼らはまだあるので、同じページのアンカー、しかしpage.htmlがリンクに含まれています。href="https://stackoverflow.com/thispage.html#ac1"href="#ac1" this_document.html#anchor コードスニペットを表示 $(document).ready(function() { // anchor links without history $.acAnch = …

4
アスペクト比を想定せずにiframeを応答させる方法は?
アスペクト比を想定せずにiframeをレスポンシブにする方法は?たとえば、コンテンツには幅や高さがあり、レンダリング前は不明です。 JavaScriptを使用できることに注意してください。 例: &lt;div id="iframe-container"&gt; &lt;iframe/&gt; &lt;/div&gt; iframe-container余計なスペースがなくてもコンテンツがかろうじて収まるようにサイズを調整します。つまり、コンテンツを表示するのに十分なスペースがあり、スクロールせずに表示できますが、余分なスペースはありません。コンテナはiframeを完全にラップします。 これは、コンテンツのアスペクト比が16:9であると想定して、iframeをレスポンシブにする方法を示しています。しかし、この質問では、アスペクト比は可変です。

1
SafariのStorage Access APIを使用してiframeにCookieを設定できません
ページにiframeがあります。SafariがサードパーティのCookieをブロックしているため、「開発者向けガイダンス」で以下の提案に従ってStorage Access APIを使用しようとしています。https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more /。ドキュメントから次のコードをコピーしました: &lt;script type="text/javascript"&gt; window.addEventListener('load', () =&gt; { document.getElementById('test-button').addEventListener('click', () =&gt; { document.hasStorageAccess().then(hasAccess =&gt; { console.log('hasAccess: ' + hasAccess); if (!hasAccess) { return document.requestStorageAccess(); } }).then(_ =&gt; { console.log('Now we have first-party storage access!'); document.cookie = "foo=bar"; console.log(`document.cookie: ${document.cookie}`); }).catch(_ =&gt; { console.log('error'); }); }); }); &lt;/script&gt; &lt;button …

2
Safari 13以降のiframeがCORS Cookieをブロックする
Safariのフラットアウトでは、親ドメインとは異なるドメインのiframeにcookieを設定できません。サーバー側のCORSヘッダーは抑制されます。 明確にするために:ユーザーはdomainA.comにいます。domainB.comのiframeが開いていて、iframe内のdomainB.comのユーザーを認証しようとします。Set-Cookieヘッダーは、必要なすべてのヘッダーとともに、domainB.com iframe内のサーバーから返されますが、Safariは後続の呼び出しでそれを送り返しません。 以前の回避策は、iframeからフォームを送信し、応答にCookieを設定することでした。ユーザーがフォームをクリックして何かを送信するのが好きだったのではないでしょうか。フォームの送信にはコールバックがないため、Cookieをポーリングして応答がいつ返されたかを確認する必要があります。また、HttpOnly Cookieの場合はできませんでしたが、うまくいきました。それがなかったまで。 次に、より最近の回避策は、ユーザーを真新しいウィンドウ/タブでiframeドメインにリダイレクトし、そこにランダムなCookieを設定し、その瞬間から、そのサブドメインがiframe内で「信頼」されたことです。ここでも、新しいウィンドウ/タブを開くにはクリックが必要で、新しいタブが開いていることを視覚的に示すこともありました。多くのセキュリティ、そのような標準。 そして今、Safari 13以降-回避策はありません。安全なiframe Cookie設定はもうありません 🤬 その他の認証スキームは、私たちには適していません(例:Auth-Xヘッダー)。HttpOnlyセキュアCookieを使用する必要があります。これは、そのトークンがJavaScriptクライアント側からアクセスできないようにするためです。 明確にするために、すべてが他のブラウザでうまく機能します。 関連するWebKit Bugzilla 誰か提案はありますか? 編集: リンク@tomschmidtをありがとう、それは正しい方向のようです。AppleのStorage Access APIを使用してみましたが、残念ながら、APIを使用してログインロジックを初期化する前にアクセスをリクエストするようにしていますが、 requestStorageAccess = async() =&gt; { return new Promise(resolve =&gt; { //@ts-ignore document.requestStorageAccess().then( function () { console.log('Storage access was granted'); resolve(true); }, function () { console.log('Storage access was denied'); resolve(false); } ); …

2
iframe予約フォームで要素を選択する際の問題
このiframe予約フォームでメールフィールドを選択しようとしています。最終的にはフィールドで別のことをしたいのですが、今のところテストとして、要素を選択してプレースホルダーを変更したいだけです。 このエラーが発生したため、正しく選択していません:Uncaught TypeError:HTMLButtonElement.changeCopyでnullのプロパティ 'placeholder'を設定できません ここで私のコードのライブバージョンを表示し、上部のボタンをクリックするとコンソールにエラーが表示されます。https://finnpegler.github.io/cart_recover/ 以下のスニペットとしてコードも含めましたが、クロスオリジンフレームで行うと別のエラーがスローされます。 var iframe = document.getElementById("booking-widget-iframe"); var field = iframe.contentWindow.document.querySelector("booking[email]"); function changeCopy() { field.placeholder = "hello"; } document.getElementById("button").addEventListener("click", changeCopy) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Test site for Cart Recover Tool&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /&gt; &lt;link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans&amp;display=swap" rel="stylesheet"&gt; &lt;link rel="icon" href="favicon.ico"&gt; &lt;meta name="viewport" …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.