HTML5 - Framset nachbilden

Bitte sehr:
Die Arbeitsdatei. Das Verlinkte (das ich hier weglasse) entspricht konzeptionell der folgenden Datei HAUPT
HTML:
<script language="JavaScript">
function IFrameLoad(Dieses) {
 var Brauser;
 Dieses.style.height = 0;
 if ( (navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {Brauser = 1;}
 else if(navigator.userAgent.indexOf("Chrome") != -1 ) {Brauser = 1;}
 else if(navigator.userAgent.indexOf("Safari") != -1) {Brauser = 1;}
 else if(navigator.userAgent.indexOf("Firefox") != -1 ) {Brauser = 2;}
 else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) {Brauser = 2;}
 else {Brauser = 0;}
 if (Brauser == 1) {
  Dieses.style.height = Dieses.contentDocument.documentElement.scrollHeight;
 } else {
  Dieses.style.height = Dieses.contentWindow.document.body.scrollHeight;
 }
}
</script>
</head>
<body>
<span class="tabs">
 <a href="1.htm" target="IRahmen">Eins</a>&nbsp;&bull;&nbsp;
 <a href="2.htm" target="IRahmen">Zwei</a>&nbsp;&bull;&nbsp;
 <a href="3.htm" target="IRahmen">Drei</a>&nbsp;&bull;&nbsp;
 <a href="3.htm" target="IRahmen">Vier</a>&nbsp;&bull;&nbsp;
 <a href="4.htm" target="IRahmen">F&uuml;f</a>&nbsp;&bull;&nbsp;
 <a href="5.htm" target="IRahmen">Sechs</a>&nbsp;&bull;&nbsp;
 <a href="6.htm" target="IRahmen">Sieben</a>
</span>
<br><br>
<table cellpadding="0" cellspacing="0" width="100%">
 <td>
   <center>
   <iframe id="IRahmen" name="IRahmen" src="kopf.htm" onload="IFrameLoad(this);"></iframe>
   </center>
  </td>
 </tr>
</table>
<body>
</html>
HAUPT.HTM
HTML:
<html>
<head>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   <center>
<strong>Kopf</strong>
   </center>
  </td>
 </tr>
</table>
</body>
</html

Das hier passiert wenn ich es im Editor = IE11 aufrufe:
1621171739366.png

Der IFrame wird der Höhe von HAUPT angepasst.

Und das hier wenn ich die Arbeitsdatei in Chrome lade. Oder FF.
1621171867841.png


Der IFrame wird nicht aufgebaut, es stürzt in der Zeile
Dieses.style.height = Dieses.contentDocument.documentElement.scrollHeight;
kalt ab. Stammt aus Google-Suchen.

Wo soll dein o.g. Code denn hin um den gewünschten Erfolg zu zeitigen?

CN8
 
Du scheinst eine lokale Datei zu öffnen, statt das ganze mit einem HTTP-Server zu machen? Hier kann es sein, dass Cross-Origin dein Plan durchkreuzt. contentDocument ist nur vorhanden, wenn die frame-src den selben origin hat (was bei lokalen files glaube ich nie der Fall ist).

Aber um deine Frage zu beantworten:
Öffne folgendes minimale Beispiel: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
Dann fügst du da folgendes unter dem iframe ein:

HTML:
<script>
  const frame = document.getElementsByTagName('iframe')[0];
  frame.addEventListener('load', () => frame.style.height = `${frame.contentDocument.documentElement.offsetHeight}px`);
</script>

Funktioniert bei mir im Firefox, funktioniert bei mir im Chrome.. IE keine Ahnung, den ignoriere ich schon lange.

Meinen Alternativcode müsstest du in die Dateien {1,2,3,4,5,6}.htm hinzufügen, da sich hier der Frame "von innen" selbst anpasst.
 
Da kommt ein $ drin vor; JQuery wenn ich mich nicht irre.
Dies möchte ich nicht. Oder anders: „Das muss auch ohne gehen müssen!“😉

Die Idee, dass es mit der Herkunft, lokal, zu tun hat kann ich mich nicht erwehren.
Also habe ich es eben getestet…

--zensiert--

Danke, erneut!
Ich brauche nicht mal die JQuery-Zeile. Aber das ist doch zu blöd, dass, man das nicht einfach so lokal testen kann. Ja, ich hab’ das mit der Herkunftsquelle unfden schützendne Regeln sogar gelesen, aber doof wie ich bin dachte ich da an andere Domains eun nicht an den selben lokalen Ordner..!

Da habe ich dich und andere Hilfswillige ungewollt in die Wüste geschickt nicht zu erwähnen, dass ich rein lokal teste. Oder wenigstens völlig ungern… ›öffentlich‹. (Auf dortigen Bastelmüll muss man nicht stoßen müssen.)

Und nun? Brüte ich schon wieder was aus wie ich mein Konstrukt - womöglich dann doch wieder ohne IFrame… - nicht nur als Menüauswahl sondern (mit Menü, das ist klar) mit einem Inhalt unmittelbar aufrufen kann. Aber da will ich mal allein dran knuspern.

CN8
 
Wo siehst du da ein $?

Edit: Ach im string. Das ist kein JQuery, das ist ein Template Literal.

Du kannst auch lokal testen, aber eben mit einem HTTP-Server.
 
frame.addEventListener('load', () => frame.style.height = [B][COLOR=rgb(184, 49, 47)]$[/COLOR][/B]{frame.contentDocument.documentElement.offsetHeight}px);
Ist doch ein $ und kein € oder ¥ 😉
Habe ich jedenfalls was zu lernen.

Einen Hosentaschen-Homeserver habe ich zur Hand, aber fürs Testen ist mir prinzipiell ein einfacher Tastendruck das Maximum (bisher habe ich keine Editor gefunden der eine CSS mit einer HTM verbindet und parst auch wenn keine explizit gespeichert wurde…) Speichern, rüber, F5, retour ist leidlich umständlich.

CN8
 
Ich verschiebe doch auch nichts.
Aber ich editiere und muss das ja auch betrachten (rüber, mit den Augen nämlich). Und auf was die geänderte HTM dann ›läuft‹, ich würde mich wundern wenn das einen dauernden Auto-Refresh hätte. ›Rüber‹ um es zu sehen muss ich aber auch dann (sofern nicht der Monitorplatz ausreichte - und das tut er nicht).
CN8
 
Auch dafür gibt es Lösungen. Aber das überlasse ich jetzt mal dir, danach zu googlen.
 
»Zaubere eine 2. Monitor herbei wo kein Platz für ihn ist« 😉
Ums Wechseln komme ich nicht rum, so oder so.
CN8
 
Ich meinte das automatische Neuladen bei Änderungen.
 
Habe ich schon verstanden. Aber das löst das Problem nicht zwischen Editor und «Betrachter» wechseln zu müssen. Im PsPad muss ich nicht speichern zum Betrachten, was auch gewisse Vorteile hat.
CN8
 
Zurück
Oben