6

スクロールdiv内に非スクロールiFrameを配置し、iFrame内のアンカーリンクを正しく機能させることは可能ですか？ iFrame内のアンカーリンクは、iFrame内の場所までスクロールする必要があります。親ページの要素を指す必要はありません。

これが私のjsFiddleの簡単な例です。

http://jsfiddle.net/shopguy/WjmHG/

そしてそのためのコード：

<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>

私の例で使用されているhypergurl.comリンクとの関連はありません。これは、ID/名前構文リンクによるアンカーを含むページを見つけた最初の例にすぎません。

JSFiddleをロードし、iFrame内の[Jump to Bottom]リンクをクリックしても、何も実行されません（FireFox 19.0.2でテスト）。さまざまなページでテストする場合、FireFoxでは機能しません。Chromeでは、最初にクリックしたときに機能することがありますが、上にスクロールしてもう一度クリックすると機能しません。IE8では、ほとんどの場合、動作（スクロール）します。

iFrame自体にスクロールバーを持たせると（scrolling = "no"を削除）、スクロールは常に正しく機能します。フレームの外側にスクロールしたいコンテンツがあるので、これは私にとって実用的な解決策ではありません。実際のコードでは、コンテンツを埋めるためにiFrameの高さを動的に設定しました。これにより、ページのコンテンツのように見えます。

なぜこれを行う必要があるのか​​に関する追加情報：

私はWebベースの電子メールクライアントを作成していますが、これまでのところ、電子メールのHTML本文をiframe内に表示する場合と、テーブルセル内またはページ内のdiv内に表示する場合とでは、問題が最も少ないようです。この種のリンクを機能させたいのですが。私はコンテンツをある程度制御できます。それは私のサーバーからのものであり、いくつか変更することができます（ただし、あまりハッキングしたくない）。たとえば、新しいウィンドウで開くようにすべてのリンクをすでに変更しています（ただし、＃で始まるリンクは変更していないため、これは私の問題ではありません）。

GmailがiFrameを使用していないことは知っていますが、私のXFINITY（Comcastケーブルによる）Webベースの電子メールクライアントはiFrameを使用しており、それらを機能させることができました（ただし、これまでのところ、すべてが何をしているのか理解していません）。

4

2 に答える 2

6

この投稿をチェックしてください：iFrame内のリンクをジャンプ

iframeのドメインが異なる場合、JavaScriptソリューションを使用してこれを解決することはできませんが、そうである場合は、iframe内のすべてのアンカーにtarget ="_parent"属性を追加できます。

var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;

var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
    anchors[i].target = '_parent';
于 2013-10-11T19:15:39.630 に答える
2

最近、このライブラリにコードを追加して、iFrame内のアンカーリンクに関するすべての問題を解決しました。

https://github.com/davidjbradshaw/iframe-resizer

ページナビゲーションでのすべてのリクエストをインターセプトし、親ページを正しい位置にスクロールします。iFrameでアンカーが見つからない場合は、親ページにバブルして、そこで検索します。

于 2015-01-19T14:24:54.140 に答える