2016-09-07 1 views
0

Derzeit arbeite ich an einer Website, die verschiedene Frames verwendet, um Inhalte anzuzeigen. Ein Frame besteht aus einem faltbaren Menü, das mehr Platz benötigt, als der eigentliche Frame bereitstellt. Ist es möglich, eine bestimmte Rahmenbreite zu durchbrechen, ohne alle Seiten anzupassen? Ich möchte keine Bildlaufleisten verwenden und verwende bereits Z-Indizes.Wie durchbrechen Sie einen Objektrahmen auf einer anderen Seite?

Als Beispiel, ich habe zwei Seiten: index.html und includepage.html. In diesem Fall möchte ich den Text sehen, ohne index.html anzupassen und Scrollbalken zu sehen.

index.html

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
     body { 
      background-color: green; 
     } 

    </style> 
</head> 
<body> 

     <object data="includedpage.html" width="100%" height="150"></object> 

</body> 
</html> 

Includedpage.html

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
     html{ 
      overflow: hidden; 
     } 
     body { 
      background-color: yellow; 
     } 

     #content_need_to_displayed{ 
      margin-top: 150px; 
     } 
    </style> 
</head> 
<body> 

    <div id="content_need_to_displayed"> 
     Test 
    </div> 
</body> 
</html> 
+0

_ „ich auf einer Website arbeite, die verschiedenen Frames anzeigen Inhalt verwendet“ _ - so weit, so schlecht . Obwohl Sie hier keine Frames, sondern Objekte verwenden, sind die Usability-Nachteile für beide Methoden ungefähr gleich. Sie sollten wirklich nach anderen Möglichkeiten suchen, um zu erreichen, was Sie wollen. – CBroe

Antwort

0

benötigen Sie einen größeren Wert für die Höhe ab: 185

<object data="includedpage.html" width="100%" height="185"></object> 

margin-top + Text (Schriftart -size) + Standard User Agent Body Marge (oben + unten) = 150 + 18,5 + 16px (in Chrome) ~ = 185px

oder können Sie mit Prozent

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
     body { 
      background-color: green; 
     } 
     body,html{ 
      height:100% 
     } 


    </style> 
</head> 
<body> 

     <object data="Includedpage.html" width="100%" height="100%"></object> 

</body> 
</html> 

js Lösung

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
    body { 
     background-color: green; 
     margin: 0px; 
     padding: 0px; 
    } 
    </style> 
</head> 

<body> 

    <object id="mypage" data="includedpage.html" width="100%"></object> 
    <script type="text/javascript"> 
    function getDocHeight(doc) { 
     doc = doc || document; 
     // stackoverflow.com/questions/1145850/ 
     var body = doc.body, 
     html = doc.documentElement; 
     var height = Math.max(body.scrollHeight, body.offsetHeight, 
     html.clientHeight, html.scrollHeight, html.offsetHeight); 
     return height; 
    } 

    function setIframeHeight(id) { 
     var ifrm = document.getElementById(id); 
     var doc = ifrm.contentDocument ? ifrm.contentDocument : 
     ifrm.contentWindow.document; 
     ifrm.style.visibility = 'hidden'; 
     ifrm.style.height = "10px"; // reset to minimal height ... 
     // IE opt. for bing/msn needs a bit added or scrollbar appears 
     ifrm.style.height = getDocHeight(doc) + 4 + "px"; 
     ifrm.style.visibility = 'visible'; 
    } 

    document.getElementById('mypage').onload = function() { // Adjust the Id accordingly 
     setIframeHeight(this.id); 
    } 
    </script> 
</body> 

</html> 
+0

Danke für Ihre Hilfe. Ich weiß, dass das möglich ist, obwohl das nicht das ist, was ich meine. Ich suche nach einer Möglichkeit, die Informationen auf der mitgelieferten Seite abzurufen, ohne die Höhe anzupassen. Vielleicht ist das nicht möglich, aber ich bin mir nicht sicher. – Tom

+0

Ich habe meine Antwort mit einer js-Lösung aktualisiert, Sie können es nicht nur aus CSS beheben. –

Verwandte Themen