मूल पृष्ठ स्क्रॉल करने के लिए iframes में एंकर से कैसे बचें

Question

तो, यहां समस्या है: मेरे पास बीच में आईफ्रेम के साथ एक लंबा लंबा पृष्ठ है। अब, अगर आईफ्रेम में एंकर क्लिक किया गया है, तो पूरा पृष्ठ आईफ्रेम पर स्क्रॉल किया गया है, जो मैं टालना चाहता हूं।

यहां एक उदाहरण है: http://jsfiddle.net/ymbV7/1/ पृष्ठ को स्क्रॉल न करें, लेकिन अगर आप "सामग्री" मेनू देख सकें, तो iframe स्क्रॉल करें, और किसी भी लिंक को आजमाएं (उदाहरण के लिए "विशेषताएं")।

मुझे बाहरी पृष्ठ की आवश्यकता है जो स्क्रॉल न करें, जबकि 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

तो तुम कह रहे हैं कि आप एक विशेष अनुच्छेद के लिए ले जाने के लिए जब लिंक जो बताती है पर क्लिक किया चाहते हैं लिंक विवरण सही है?

जो मैं समझता हूं उसके अनुसार आप ऐसा कर सकते हैं।

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

:

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

क्लिक करने के बजाय

यहाँ आप विशेषताएं लिख सकते हैं, के रूप में मैं क्या http://jsfiddle.net/ymbV7/1/

अब में देखा था वह जगह है जहां यह सब आप सब करने की ज़रूरत बढ़ना चाहिए से जोड़ने के लिए यह है

"सटीक रेखा" पैरा नाम दिया गया लिंक नाम है या आपको संदर्भित करने के लिए शीर्षक है।

..

यह केवल आइफ्रेम और नहीं पूरे पृष्ठ स्क्रॉल

अधिक निकासी

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

मैंने कोशिश की और यह मेरे लिए काम किया के लिए इस लिंक का उल्लेख

Answer 3

मैं अगर आपको लगता है <a target="name of iframe" href="#name of anchor">Click here</a> यह काम करेगा क्योंकि तब लिंक आईफ्रेम में खुल रहा है और संभवतः यह एंकर आईफ्रेम पर पूरा पेज स्क्रॉल कर रहा था। उम्मीद है कि मैंने मदद की और उम्मीद है कि यह काम करता है! :)

Answer 4

फ़्रेम के स्थान या हैश को सेट करने के विभिन्न संयोजनों को आजमाकर दुर्भावनापूर्ण रूप से अभिभावक स्क्रॉलिंग के परिणामस्वरूप।

तो यह वही है जो आईफ़्रेम की सामग्री एक ही डोमेन पर थी, इसलिए फ्रेम डीओएम पर नेविगेट करने वाली क्रॉस-साइट समस्या नहीं थी।

मैंने target="myiframe" करने के बजाय माता-पिता में लिंक संशोधित किए, तो मैंने डिफ़ॉल्ट कार्यान्वयन को छोड़कर स्क्रॉलिंग करने के लिए एक ओ'क्लॉक फ़ंक्शन जोड़ा (जो माता-पिता को आईफ्रेम पर कूदने का कारण बनता है)।

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

लिंक समारोह इस तरह दिखता है:

/// 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 और अभी भी ठीक से काम करता है, तो जावास्क्रिप्ट विकलांग (बस डिफ़ॉल्ट माता पिता कूद में बदल जाती)।

उम्मीद है कि यह किसी और की मदद करेगा।

Answer 5

शायद यह क्रोम में एक बग है, क्योंकि यह समस्या नवीनतम आईई और फ़ायरफ़ॉक्स में नहीं होती है।

आईफ़्रेम में एंकर पर क्लिक करते समय यह खुशी हुई, और ब्राउज़र विंडो के शीर्ष पर एंकर को संरेखित करने का प्रयास करता है।

मैं हल इस मुद्दे का उपयोग जावास्क्रिप्ट (jQuery):

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

मुझे आशा है कि यह आप & सौभाग्य मदद कर सकते हैं!