iframeのアンカーを避けて親ページをスクロールする方法

Question

ここに問題があります。中間のiframeを持つ非常に長いページがあります。アンカーがiframeでクリックされると、ページ全体がiframeにスクロールされます。これは避けたいものです。

例：http://jsfiddle.net/ymbV7/1/ 「コンテンツ」メニューが表示されるまで、ページを下にスクロールせずに、リンク（「機能」など）を試してください。

スクロールしないように外部ページが必要ですが、iframeはクリックされたアンカーに正しくスクロールする必要があります。

アイデア？このようなテーブルにあなたのコンテンツを置くため

Answer 1

試してみてください。

<table cellpadding=0 cellspacing=0 height="100%" width="100%"> 
    <tr> 
    <td> 
     Header 
    </td> 
    </tr> 

    <tr> 
    <td> 
     <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Footer 
    </td> 
    </tr> 
</table> 

だから、あなたが説明したリンクをクリックしたときに、特定の段落に移動したいことを言っているhttp://www.webdeveloper.com/forum/showthread.php?t=212032

Answer 2

を参照してください。リンクの詳細は右ですか？

私が理解していることによると、このようにすることができます。

<a href="#exactline">Click here</a> 

の代わりにクリックして、ここで私はそれがすべてを行う必要がこれです移動しなければならない場所へのリンクになりましたhttp://jsfiddle.net/ymbV7/1/

で見たもののように、機能を書き込むことができます。

<h2><a name="exactline">Linking Directly from Features</a></h2> 
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to. 
</p> 

"exactline"は、パラに与えられたリンク名またはあなたが何を参照するかを見出します。

それはあなたなら、私が思う、私が試した、それは私のため

Answer 3

を働いた

がよりクリアランス

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

ために、このリンクを参照してください。..だけのiframeではなく、ページ全体をスクロール<a target="name of iframe" href="#name of anchor">Click here</a> iframeでリンクが開かれているため、アンカーがページ全体をiframeにスクロールさせている可能性があります。私が助けて、それがうまくいったら願って！ :)

Answer 4

フレームの位置やハッシュを設定するさまざまな組み合わせを試しても、残念ながら親スクロールが発生しました。

これはiframeのコンテンツが同じドメイン上にあったために終了したので、フレームDOMをナビゲートするクロスサイトの問題はありませんでした。

親のリンクをtarget="myiframe"の代わりに変更しました。デフォルトの実装をバイパスするスクロール機能を追加しました（親がiframeにジャンプするように思われる）。

/// for scrolling iframe without jumping parent page 
function linkFunction(atag, event) { 
    event.preventDefault(); 
    var iframe = document.getElementById('myiframe'); 
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document; 
    var name = atag.href.split('#')[1]; // get the hash 
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag 
    // get position of the anchor relative to the current scroll position 
    var offset = anchor.getBoundingClientRect().top 
    // jump scroll the iframe content to the anchor 
    iframe.contentWindow.scrollBy(0, offset) 
} 

ませんjQueryとJavaScriptを無効には（単にデフォルトの親ジャンプに戻ります）場合は、まだ正常に動作します：

<a onclick="linkFunction(this, event);return false;"... 

リンク機能は、次のようになります。

これは他の人に役立つことを願っています。

Answer 5

クロムのバグかもしれません。この問題は、最新のIEとFirefoxでは発生しない可能性があります。

これはiframeでアンカーをクリックすると起こり、ブラウザはアンカーをウィンドウの上部に揃えようとします。

私はこの問題ではJavaScript（jQueryの）を使用解く：

$('body').on('click', 'a', function(e) { 
    if($(this).attr('href').startsWith('#')) { 
     e.preventDefault(); 
    } 
}); 

私はそれはあなたが幸運を&役立つことを願ってます！