DiggBar अपने डोमेन पर नहीं सामग्री पर आधारित आईफ्रेम की गति को गतिशील रूप से कैसे आकार देता है?

किसी ने पहले से ही पूछे गए हैं, How does the DiggBar work? पिछले प्रश्न में। एक अलग डोमेन भर में एक साइट की सामग्री के आधार परDiggBar अपने डोमेन पर नहीं सामग्री पर आधारित आईफ्रेम की गति को गतिशील रूप से कैसे आकार देता है?

कैसे डिग गतिशील उनके आइफ्रेम की ऊंचाई का आकार परिवर्तन करता है,:

किसी को एक बात का पता नहीं था कि एक सभ्य जवाब मिले हैं?

इतने पर यहाँ गतिशील रूप में लंबे समय के रूप में फंसाया यूआरएल अपने खुद के डोमेन पर है एक iframes ऊंचाई पर आधारित सामग्री (जावास्क्रिप्ट का उपयोग) एडजस्ट करने के लिए सवाल और जवाब के बहुत सारे हैं। हालांकि, डिग ने इस समस्या को किसी भी डोमेन की वेबसाइटों के साथ हल किया है।

क्या कोई भी SO वेब प्रोग्रामर कोई विचार नहीं करते कि उन्होंने इसे कैसे पूरा किया?

नोट: iframe बस 100% ऊंचाई पर सेट नहीं है। Iframe टैग बस इस तरह काम नहीं करता है। Google "100% ऊंचाई iframe" और आप देखेंगे कि मेरा क्या मतलब है।

स्रोत

2009-04-16 Mithrax

आप their CSS को देखें, तो वे iframe के लिए height: 100% का उपयोग करें:

iframe#diggiFrame { 
    color: #666; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    -webkit-box-sizing: border-box;  
}

वे 46px की ऊंचाई वाला है कि ऊपर DiggBar स्थिति है, तो iframe शेष अंतरिक्ष के 100% लेता है। body तत्व पर पर iframe पृष्ठ को पृष्ठ स्क्रॉल करने की अनुमति देने के बजाय पृष्ठ की ऊर्ध्वाधर ऊंचाई के भीतर पूरी तरह से रखने के लिए overflow: hidden का उपयोग करें। इसका मतलब यह है कि स्क्रॉल बार पूरे पृष्ठ के बजाय iframe के अंदर दिखाई देगा। ध्यान दें कि जिस तरह से DiggBar यह फ़ायरफ़ॉक्स में केवल quirks मोड में काम करता है; मानक मोड में इसे कैसे करें इसके लिए नीचे देखें।

body { 
    padding: 46px 0 0 0; 
    margin: 0; 
    background: #fff; 
    overflow: hidden; 
    color: #333; 
    text-align: left; 
} 

#t { 
    width: 100%; 
    min-width: 950px; 
    height: 46px; 
    z-index: 100; 
    position: absolute; 
    top: 0; 
    left: 0; 
    /* overflow: hidden; */ 
    border-bottom: 1px solid #666; 
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x; 
    line-height: 1; 
}

संपादित: जो मुझे विश्वास नहीं है के लिए, यहाँ एक small example है। इसे पूरी जगह भरने के लिए, आपको इसे सीमा के लिए सेट करने की आवश्यकता है, और आपको कोई मार्जिन रखने के लिए <body> की आवश्यकता है।

संपादित 2: आह, क्षमा करें, मैं देख रहा हूं कि आप किस बारे में बात कर रहे थे। स्क्रॉल बार को जिस तरीके से आप चाहते हैं उसे काम करने के लिए body टैग पर आपको overflow: hidden की आवश्यकता है।

संपादित करें 3: ऐसा लगता है कि फ़ायरफ़ॉक्स में काम करने के लिए आपको क्विर्क मोड में होना होगा; यदि आप <!DOCTYPE html> घोषणा शामिल करते हैं, जो आपको मानकों मोड में डालता है, और आपका iframe बहुत छोटा आता है।

संपादित करें 4: आह, आप इसे फ़ायरफ़ॉक्स में मानक मोड में भी कर सकते हैं। उत्तर here मिला। आपको और <body> तत्वों पर 100% पर ऊंचाई सेट करने की आवश्यकता है।(ध्यान दें कि <!DOCTYPE html>HTML 5 के लिए कार्यप्रणाली है, जो एक काम प्रगति पर है, हालांकि, यह मानकों के मोड को चालू करने के लिए सभी आधुनिक ब्राउज़रों पर काम करता है)।

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css" media="all"> 
    html, body { 
     height: 100% 
    } 
    body { 
     margin: 0; 
     overflow: hidden; 
    } 
    #topbar { 
     height: 50px; 
     width: 100%; 
     border-bottom: 1px solid #666 
    } 
    #iframe { 
     height: 100%; 
     width: 100%; 
     border-width: 0 
    } 
    </style> 
</head> 
<body> 
    <div id="topbar"> 
    <h1>This is my fake DiggBar</h1> 
    </div> 
    <iframe id="iframe" src="http://www.google.com/"></iframe> 
</body>

स्रोत

2009-04-16 02:45:07

iframes उस काम को काम नहीं करते हैं। इसे अपने आप आज़माएं, ऊंचाई के साथ एक आईफ्रेम सेट करें: 100% और इसके स्रोत को http://gooogle.com पर सेट करें। यह काम नहीं करेगा। – KingNestor

अधिकांश लोग ऐसा करने के लिए जावास्क्रिप्ट का सहारा लेते हैं लेकिन किसी भिन्न डोमेन पर साइट पर एक सेट सेट के साथ आईफ्रेम के लिए ऐसा करने का प्रयास करते समय यह विफल हो जाता है। मैं उत्सुक हूं कि वे यह भी कैसे करते हैं। – KingNestor

ऊंचाई 100% इसे शरीर टैग की ऊंचाई तक बढ़ाएगी, जो आइफ्राम सामग्री की ऊंचाई नहीं है और ज्यादातर मामलों में बहुत छोटा होगा। – KingNestor

आईफ्रेम लक्ष्य वेबसाइट के साथ डिग वेबसाइट पर है, न कि दूसरी तरफ। आईफ्रेम 100% चौड़ाई और ऊंचाई पर सेट है।

स्रोत

2009-04-16 02:29:16

हाँ, मुझे यह पता है। लेकिन वह स्रोत जो iframe इंगित कर रहा है वह अपने डोमेन के बाहर एक यूआरएल को इंगित कर रहा है। इस प्रकार, सुरक्षा के कारण वे उस सामग्री की ऊंचाई के आधार पर गतिशील रूप से आकार बदलने में सक्षम नहीं होना चाहिए। – Mithrax

100% ऊंचाई iframes इस तरह काम नहीं करते हैं। यह गूगल। – Mithrax

एचटीएमएल के साथ समस्या का हिस्सा आप किसी भी चीज का तत्व केवल 100% ऊंचाई पर सेट नहीं कर सकते हैं और इसे पूरी विंडो स्पेस ले सकते हैं। ऐसा करने का एक तरीका है कि शरीर को खिड़की की पिक्सेल ऊंचाई बनाकर शरीर के अंदर कोई भी चीज़ 100% तक सेट हो, खिड़की का आकार होगा।

मूल रूप से केवल एक जावास्क्रिप्ट बनाएं जो विंडोज़ ऑनर्सिज़ ईवेंट पर संबंध रखता है और इसे शरीर के आकार में शरीर का आकार बदलता है।

यहाँ एक उदाहरण मैंने बनाया jQuery

<script language="JavaScript" type="text/JavaScript"> 
    $(window).resize(function() { 
     $('body').height(document.documentElement.clientHeight); 
    }); 
</script>

का उपयोग कर इस के साथ आप एक div या किसी अन्य तत्वों की स्थापना की और यह खिड़की की पूरी ऊंचाई पर काम करने में सक्षम हो जाएगा।

स्रोत

2009-04-16 02:55:22 Superdumbell

एक आईफ्रेम में क्विर्क मोड में 100% ऊंचाई हो सकती है। डिग टाइप को छोड़कर इसे प्राप्त करता है।

स्रोत

2009-12-02 01:36:50

आईफ्रेम में 100% घोषित मूल स्थान का 100% प्रतिशत है। एक उदाहरण है:

/* parent element */ 

html, body { 
    width: 100%; 
    height: 100%; 
} 

/* child element */ 
iframe { 
    width: 100%; /* this is truly 100%, try it out */ 
    height: 100%; /* try it out */

स्रोत

2014-03-14 23:20:56

DiggBar अपने डोमेन पर नहीं सामग्री पर आधारित आईफ्रेम की गति को गतिशील रूप से कैसे आकार देता है?

उत्तर

संबंधित मुद्दे