पूरा पृष्ठ <iframe>

97

मेरे पास नीचे उदाहरण कोड है। यह मोबाइल उपकरणों पर ब्राउज़र को छोड़कर सभी ब्राउज़रों के साथ ठीक काम करता है।

अतिप्रवाह टैग मुद्दा है।

मोबाइल को छोड़कर सभी के साथ काम करता है:

margin: 0; padding: 0; height: 100%; overflow: hidden;

सभी मोबाइल और कंप्यूटर के साथ काम करता है:

margin: 0; padding: 0; height: 100%;

दोनों पर काम करने का सबसे अच्छा तरीका क्या है?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>

html css iframe

— lacer
स्रोत

सिर्फ पुनर्निर्देश क्यों नहीं cnn.com?

— GolezTrol

cnn.com एक उदाहरण से अधिक है। उस व्यवहार को दिखाने के लिए जिसे मैं रोकने की कोशिश कर रहा हूं।

— लैकर

बस <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> युक्त HTML के सिर में जोड़ें और जवाबदेही फिर से वापस (कम से कम आंशिक रूप से) है।

— नुकी

171

यहां काम करने का कोड है। डेस्कटॉप और मोबाइल ब्राउज़र में काम करता है। आशा करता हूँ की ये काम करेगा। सभी को जवाब देने के लिए धन्यवाद।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>

— lacer
स्रोत

2

बाहर देखो, जब मैं ऊपर एक iframe रखना चाहता था - क्रोम में एक समस्या थी। मैंने समापन </ iframe> जोड़ा और काम करता है

— Michal - wereda-net

ऐसा लगता है कि इफ्रेम के भीतर सामग्री से जवाबदेही (स्तंभों का ढहना आदि) दूर हो रही है। लेकिन किसी तरह केवल मोबाइल सफारी के साथ पेज खोलते समय, डेस्कटॉप ब्राउज़र का आकार बदलने पर नहीं। कोई भी विचार जो उस व्यवहार का कारण बन सकता है?

— १

3

@psteinweber, आपको केवल <meta content='width=device-width, initial-scale=1.0' name='viewport'>युक्त पृष्ठ पर जोड़ना होगा।

— जफस्ट

क्रोमियम 81 में उचित संरेखण पाने vwके %लिए widthऔर height गुणों के बजाय उपयोग करना था । अन्यथा एक आकर्षण की तरह काम करता है।

— जोश हबदास

18

यह क्रॉस-ब्राउज़र है और पूरी तरह उत्तरदायी है:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>

— तौसिफ टोरबी
स्रोत

7

इसे अपने CSS में रखें।

iframe {
  width: 100%;
  height: 100vh;
}

— shoriwa-शॉन-बेंजामिन
स्रोत

3

यह वही है जो मैंने अतीत में इस्तेमाल किया है।

html, body {
  height: 100%;
  overflow: auto;
}

इसके अलावा iframeनिम्नलिखित शैली जोड़ें

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

— जय पटेल
स्रोत

उत्तर के लिए धन्यवाद, लेकिन यह अनिवार्य रूप से मेरे पास है इसलिए यह काम नहीं करता है। मोबाइल ब्राउज़र पर यह किसी भी चीज़ को काट देता है जो अतिप्रवाह है और आपको स्क्रॉल नहीं करने देता है।

— लैकर

@Lacer ने overflow: hiddenसाथ बदलने की कोशिश कीoverflow: auto

— Jay Patel

कोशिश की कि मोबाइल ब्राउज़र पर यह अभी भी इसे काट देता है और डेस्कटॉप ब्राउज़र पर यह डबल स्क्रॉल का कारण बनता है

— लैकर

अभी भी डेस्कटॉप ब्राउज़र में डबल स्क्रॉल नहीं है और मोबाइल ब्राउज़रों पर कटौती करता है

— लैकर

2

फुल-स्क्रीन फ्रेम रीडायरेक्ट और इसी तरह की चीजों के लिए मेरे पास दो तरीके हैं। दोनों मोबाइल और डेस्कटॉप पर ठीक काम करते हैं।

ध्यान दें कि यह पूरा क्रॉस-ब्राउज़र काम कर रहा है, मान्य HTML फाइलें। बस बदलो titleऔर srcअपनी आवश्यकताओं के लिए। यदि आपके पास गैर- ASCII वर्ण नहीं हैं, तो आप
छोड़ने पर विचार कर सकते हैं <meta charset>।

1. यह मेरा पसंदीदा है:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

या 2. ऐसा कुछ , थोड़ा छोटा:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

नोट :
रूढ़िवादी होने के लिए उपरोक्त उदाहरणों का उपयोग करने से बचें height:100vhक्योंकि पुराने ब्राउज़र इसे नहीं जानते हैं (शायद इन दिनों लूट लें) और height:100vhहमेशा height:100%मोबाइल ब्राउज़र पर समान नहीं है (शायद यहां लागू नहीं है)। अन्यथा, vhचीजों को थोड़ा सरल करता है, इसलिए

3. यह vh का उपयोग करके एक उदाहरण है (मेरे पसंदीदा नहीं, कम लाभ के साथ कम संगत)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>

— जे जे
स्रोत