Cách tránh các neo trong iframe để cuộn trang gốc

Question

Vì vậy, đây là vấn đề: Tôi có một trang khá dài với khung nội tuyến ở giữa. Bây giờ, nếu một neo được nhấp vào iframe, toàn bộ trang được cuộn đến khung nội tuyến, đó là những gì tôi muốn tránh.

Dưới đây là ví dụ: http://jsfiddle.net/ymbV7/1/ Không cuộn xuống trang, nhưng cuộn iframe cho đến khi bạn có thể thấy trình đơn "Nội dung" và thử bất kỳ liên kết nào (ví dụ "Tính năng").

Tôi cần trang bên ngoài không cuộn, trong khi khung nội tuyến phải cuộn chính xác đến neo được nhấp.

Bất kỳ ý tưởng nào?

Answer 1

Cố gắng đưa nội dung của bạn vào một bảng như thế này:

<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> 

Tham khảo http://www.webdeveloper.com/forum/showthread.php?t=212032

Answer 2

Vì vậy, bạn đang nói rằng bạn muốn chuyển đến một đoạn đặc biệt khi nhấp vào liên kết trong đó mô tả chi tiết liên kết phải không?

Theo những gì tôi hiểu bạn có thể làm như thế này.

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

Thay vì Bấm vào đây bạn có thể viết tính năng, như những gì tôi đã thấy trong http://jsfiddle.net/ymbV7/1/

nay đến liên kết đến nơi nó phải di chuyển tất cả các bạn cần làm là:

<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> 

"đường chính xác" là tên liên kết được cung cấp cho đoạn giới thiệu hoặc hướng dẫn bạn những gì cần tham khảo.

Nó cuộn chỉ iframe và không phải là toàn bộ trang ..

tham khảo link này để biết thêm thông

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

tôi đã cố gắng và nó làm việc cho tôi

Answer 3

Tôi nghĩ rằng nếu bạn đã làm <a target="name of iframe" href="#name of anchor">Click here</a> nó sẽ làm việc bởi vì sau đó liên kết được mở trong khung nội tuyến và điều này có thể là lý do tại sao các neo đã làm cho toàn bộ trang cuộn đến khung nội tuyến. Hy vọng tôi đã giúp và hy vọng nó hoạt động! :)

Answer 4

Thử các kết hợp khác nhau của việc đặt vị trí của khung hoặc giá trị băm vẫn không may dẫn đến việc cuộn phụ huynh.

Vì vậy, đây là những gì tôi đã kết thúc vì nội dung của khung nội tuyến nằm trên cùng một tên miền nên không có vấn đề liên quan đến việc điều hướng khung DOM.

Tôi đã sửa đổi các liên kết trong phụ huynh thay vì thực hiện target="myiframe", tôi đã thêm chức năng giờ để thực hiện di chuyển bỏ qua việc triển khai mặc định (điều này có vẻ khiến cha mẹ chuyển sang khung nội tuyến).

chức năng

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

Các liên kết trông như thế này:

/// 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) 
} 

Không JQuery và vẫn hoạt động đúng cách nếu Javascript bị vô hiệu (chỉ cần trở lại với nhảy cha mẹ mặc định).

Hy vọng điều này sẽ giúp người khác.

Answer 5

Có thể đó là lỗi trong chrome, vì vấn đề này không xảy ra trong IE và Firefox mới nhất.

Nó vui vẻ khi được nhấp vào neo trong khung nội tuyến và trình duyệt cố gắng căn chỉnh neo tới đầu cửa sổ.

tôi giải quyết vấn đề này sử dụng JavaScript (jQuery):

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

Tôi hy vọng nó có thể giúp bạn & chúc may mắn!