iframe

से कॉल करने के बाद मेनू सही ढंग से प्रदर्शित नहीं हो रहा है मुझे किसी पृष्ठ पर आईफ्रेम प्रदर्शित करने में कोई समस्या है।iframe

मेरे पास एक शीर्ष फ्रेम है जो शीर्ष पर एक लोगो प्रदर्शित करता है (जो ठीक है) मेरे पास पृष्ठ के बाईं ओर एक मेनू है। (जिसमें मुझे कोई समस्या है) मेरे पास मेनू के दाईं ओर एक फ्रेम है जो मेरा पृष्ठ प्रदर्शित करेगा।

मेरे index.htm पेज सभी फ़्रेम लोड हो रहा है और इस तरह दिखता है:

<script language="javascript"> 
    function win_resize() 
    { 
     var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight; 
      document.getElementById('leftMenu').height = _docHeight - 90; 
    } 
</script> 

<body onresize="win_resize()"> 
    <!-- Header --> 
    <div id="header"> 
     <div> 
      <img src="logo.png"> 
     </div> 
    </div> 

    <!-- Left Menu --> 
    <div id="left-sidebar" > 
     <iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"></iframe> 
    </div> 

    <!-- Main Page --> 
    <div id="content"> 
     <iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe> 
    </div> 
</body>

मेरे menu.htm पेज है निम्नलिखित कोड:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en-GB"> 

<head> 
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> 
</head> 
<body> 

    <ol class="tree"> 
     <li> 
      <li class="file"><a href="file1.htm">File 1</a></li> 
      <li class="file"><a href="file2.htm">File 2</a></li> 
      <li class="file"><a href="file3.htm">File 3</a></li> 
      <li class="file"><a href="file4.htm">File 4</a></li> 
      <li class="file"><a href="file5.htm">File 5</a></li> 

     </li> 
    <li> 
      <label for="folder2">My Test 1</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
    <li> 
      <label for="folder2">My Test 2</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
</body> 
</html>

मेरे _styles.css फ़ाइल है निम्नलिखित:

/* Just some base styles not needed for example to function */ 
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; } 

body, form, ul, li, p, h1, h2, h3, h4, h5 
{ 
    margin: 0; 
    padding: 0; 
} 
body { background-color: #606061; color: #ffffff; margin: 0; } 
img { border: none; } 
p 
{ 
    font-size: 1em; 
    margin: 0 0 1em 0; 
} 

html { font-size: 100%; /* IE hack */ } 
body { font-size: 1em; /* Sets base font size to 16px */ } 
table { font-size: 100%; /* IE hack */ } 
input, select, textarea, th, td { font-size: 1em; } 

/* CSS Tree menu styles */ 
ol.tree 
{ 
    padding: 0 0 0 30px; 
    width: 300px; 
} 
    li 
    { 
     position: relative; 
     margin-left: -15px; 
     list-style: none; 
    } 
    li.file 
    { 
     margin-left: -1px !important; 
    } 
     li.file a 
     { 
      background: url(document.png) 0 0 no-repeat; 
      color: #fff; 
      padding-left: 21px; 
      text-decoration: none; 
      display: block; 
     } 
     li.file a[href *= '.pdf'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href *= '.html'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.css'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.js']  { background: url(document.png) 0 0 no-repeat; } 
    li input 
    { 
     position: absolute; 
     left: 0; 
     margin-left: 0; 
     opacity: 0; 
     z-index: 2; 
     cursor: pointer; 
     height: 1em; 
     width: 1em; 
     top: 0; 
    } 
     li input + ol 
     { 
      background: url(toggle-small-expand.png) 40px 0 no-repeat; 
      margin: -0.938em 0 0 -44px; /* 15px */ 
      height: 1em; 
     } 
     li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; } 
    li label 
    { 
     background: url(folder-horizontal.png) 15px 1px no-repeat; 
     cursor: pointer; 
     display: block; 
     padding-left: 37px; 
    } 

    li input:checked + ol 
    { 
     background: url(toggle-small.png) 40px 5px no-repeat; 
     margin: -1.25em 0 0 -44px; /* 20px */ 
     padding: 1.563em 0 0 80px; 
     height: auto; 
    } 
     li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */} 
     li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

पृष्ठ सही ढंग से दिखने लगता है सिवाय इसके कि बाईं ओर वाला मेनू एक चेकब दिखाता है बैल जहां इसे नहीं होना चाहिए और shold + या - प्रतीक के साथ जारी किया जाना चाहिए।

अगर मैं यह द्वारा मेरी menu.htm खोलने है स्वयं इसे सही ढंग से पता चलता

enter image description here

लेकिन जब मैं अपने index.htm पेज (जो iframe में मेनू लोड करता है) देखने में यह दिखाई नहीं देता मेनू सही ढंग से नीचे के रूप में दिखाया गया है:

enter image description here

हालांकि, जैसे ही मैं निम्नलिखित कोड जोड़ने के रूप में यह मेनू सही ढंग से पता चलता है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

हालांकि, यह मेरे win_resize फ़ंक्शन का उपयोग करके मेरी दस्तावेज़ ऊंचाई को सही ढंग से नहीं दिखाता है।

मुझे लगता है कि कोड का आखिरी बिट सही दस्तावेज़ प्रदर्शित करने से मेरे दस्तावेज़ ऊंचाई कोड को रोक रहा है।

मुझे उस फ़ंक्शन की आवश्यकता है ताकि यह पृष्ठ पर मेरे मेनू फ्रेम को सही तरीके से प्रदर्शित कर सके।

क्या कोई जानता है कि मैं कहां गलत हो गया हूं, क्योंकि यह स्वयं के द्वारा ठीक काम करता है लेकिन जैसे ही मैं इसे आईफ्रेम से कॉल करता हूं, यह सही तरीके से प्रदर्शित नहीं होता है?

क्या मैं दस्तावेज़ों की ऊंचाई को पूरा करने के लिए अपने फ़ंक्शन में सही कोड का उपयोग कर रहा हूं या क्या कोई सीएसएस है जिसका उपयोग मैं दस्तावेजों की ऊंचाई प्राप्त करने के लिए कर सकता हूं?

स्रोत

2012-09-24 Aaron

आपके 'index.htm' में 'वाम-मेनू' iframe की 'ऊंचाई' संपत्ति नहीं है।(अप्रासंगिक हो सकता है) – Souta

आपको ids का उपयोग करने की आवश्यकता नहीं है I want = checkbox2 खराब अभ्यास आईडी अद्वितीय होने के लिए हैं, यही कक्षाएं हैं, और आपकी समस्याओं में से एक भी हो सकती है – Dnaso

आशा है कि आप लंबे उत्तर के लिए तैयार हैं :) प्रश्नों का एक समूह है कि आप इस बात के बारे में क्यों हैं कि आप किस तरह से संपर्क करेंगे, लेकिन यह उस परियोजना के लिए बाधाओं के रूप में ले जाएगा जो आप काम कर रहे हैं।/खांसी/क्यों कोई jQuery या समान नहीं?/खांसी/

सबसे पहले अपने iframe ऊंचाई मुद्दा: मैं बस अपने कोड के रूप में इस प्रकार है

<script language="javascript"> 

    function win_resize() 
    { 
     var _docHeight = getDocHeight(); 
     document.getElementById('leftMenu').height = _docHeight - 90; 
    } 

    //This fixes your calculation of height issue 
    //Cross browser doc height calculator **Credit to http://james.padolsey.com** 
    function getDocHeight() { 
     var D = document; 
     return Math.max(
      Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
      Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
      Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
     ); 
    } 
</script>

मैं भी एक ऑनलोड जोड़ा एक परीक्षण किया पार ब्राउज़र ऊंचाई का पता लगाने समारोह को शामिल करने और करने के लिए कॉल onresize बदल यह फ़ंक्शन इसलिए आपको सही ऊंचाई पर प्रारंभ किया गया है और सही ऊंचाई पर भी आकार दिया गया है ...

<body onload="win_resize()" onresize="win_resize()">

दूसरी बार आपकी छद्म "चेक" कक्षा IE8 या में काम नहीं करेगी - जो मुझे लगता है कि आप समर्थन करने का प्रयास कर रहे हैं क्योंकि मुझे केवल आपकी दृश्यमान चेकबॉक्स त्रुटि मिली है।

इस मुद्दे मैं चुने गए इनपुट पर एक वर्ग के नाम टॉगल करने के लिए कुछ बुनियादी स्क्रिप्ट जोड़ा सुधार करने के लिए ...

<script type="text/javascript"> 
    function getCheckedState(e){ 
    var inputId = e.id; 
    var getCheckedState = document.getElementById(inputId).checked; 

    if (getCheckedState == true) { 
     /*if checked add class*/ 
     e.className += " " + 'checked'; 
    } else { 
     /*if not checked set class to empty string*/ 
     e.className = ""; 
    } 
} 

</script>

आप भी अपने सीएसएस में प्रासंगिक शैलियों के .checked वर्ग जोड़ने की आवश्यकता होगी जैसे

li input:checked + ol, li input.checked + ol

तीसरे, उन परेशान दिखाई चेक बॉक्स यह आसान सा था, बस इनपुट पर अपने सीएसएस करने के लिए अस्पष्टता और यानी अस्पष्टता फ़िल्टर जोड़ें।

li input { 
cursor:pointer; 
... 
opacity: 0; 
filter:alpha(opacity=0); 
}

अंत में - शायद सबसे महत्वपूर्ण बात

मैं गंभीरता से इस बिल्ड और कैसे इस नव कार्यों के बारे में बहुत सारे सवाल हैं। निश्चित रूप से वैकल्पिक तरीके हैं जिनका उपयोग आप मूल संगतता प्राप्त करने के लिए मूल HTML तत्वों और क्रॉस ब्राउज़र परीक्षण जेएस पुस्तकालयों का उपयोग कर सकते हैं। IFrames पर बेहतर निर्माण विधियों का उल्लेख नहीं है!

फिर से कहा - मुझे लगता है कि आप यहां केवल बाध्य हैं।

एक और चीज मुझे लगता है कि मुझे यह इंगित करना चाहिए - इनपुट स्थिति में परिवर्तन को ट्रिगर करने के लिए मैं "ऑनक्लिक" फ़ंक्शन का उपयोग करता हूं, यानी कंपैटिबिलिटी - "एक्सचेंज" कार्यक्षमता के लिए फिर से एक जानबूझकर विकल्प है लेकिन अपडेट नहीं होता है उस इनपुट के ऑनब्लर को बिना सिंक से बाहर छोड़ने तक (अधिक जानकारी onchange checkbox test page)

मुझे आशा है कि यह उत्तर आपको मदद करेगा, भले ही इसका एक हिस्सा आपको सही दिशा में ले जाए।

स्रोत

2012-11-11 01:40:34 frazerjay

उदाहरण बहुत से शामिल है, लेकिन ऐसा लगता है कि यह इस लाइन हो सकता है:

li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

(या इनपुट के मार्जिन मूल्यों के लिए एक और संशोधन)

इनपुट के मार्जिन मूल्यों को संशोधित करने की कोशिश करो और देखें कि यह वांछित परिणाम प्रदान करता है या नहीं। मेरा अनुमान है कि iframe इनपुट मूल्य को बाएं से बहुत दूर दबाए जाने पर दबा रहा है।

स्रोत

2012-09-24 07:29:17

रीसेट सीएसएस फ़ाइल का उपयोग करें। http://meyerweb.com/eric/tools/css/reset/

मान लीजिए इससे आपकी मदद मिलेगी।

स्रोत

2012-11-05 09:16:24

अपने सभी आईडी को अद्वितीय बनाने का प्रयास करें, चेकबॉक्स 2 उनमें से दो को बदलें और आप ठीक हो सकते हैं क्योंकि यानी बहुत स्वभावपूर्ण है। टैग के लिए लेबल भी एचटीएमएल 5 है जिसे आपको अब जानना चाहिए यानी नफरत है।

स्रोत

2012-11-11 18:17:05 Dnaso

उत्तर

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