Einstellung von HTML von window.open() seltsame Styling-Probleme in Internet Explorer

So habe ich einige Javascript, die ein neues Fenster ohne Ziel-URL öffnet. Ich möchte dann den HTML-Inhalt dieses Fensters als den Inhalt einer Variablen festlegen, eine lange Zeichenfolge mit gültigem HTML.Einstellung von HTML von window.open() seltsame Styling-Probleme in Internet Explorer

var myHtmlHead = "<link href='/foo/my.css'..."; 
var myHtmlBody = "<div id='foo'>...'"; 
var myWindow= window.open("", "MyWindow","height=500,width=500"); 

myWindow.document.head.innerHTML = myHtmlHead; 
myWindow.document.body.innerHTML = myHtmlBody;

Ich habe den Inhalt für die Lesbarkeit ausgeschnitten. Das Problem ist, dass dies zwar in Chrome und Firefox perfekt funktioniert, IE aber eine Reihe seltsamer Styling-Probleme verursacht; das CSS lädt, aber alle DIVs sind zentriert und überlappen sich und sobald ich das Fenster um ein Pixel verkleinere, korrigiert es sich. Ich denke, das liegt an der Tatsache, dass ich das CSS geladen habe, nachdem das Fenster geladen wurde und es nicht richtig anwendet, bis das Fenster neu gezeichnet werden muss.

Gibt es eine Möglichkeit, dieses Problem zu umgehen oder das Neuzeichnen programmatisch aus dem JS der übergeordneten Seite auszulösen?

Edit: IE-Version ist 11.0.9600, obwohl es scheint mit Chrome 49 zum Beispiel gut zu funktionieren.

Quelle

2016-09-14 KrisFoster

Sie sollten die Version (en) des Browsers in Bezug auf eine solche Frage klar abgrenzen. –

Warum enthält Ihr Code, den Sie dem innerHTML des head- und body-Elements zuweisen, die Tags für head und body _ again_? – CBroe

@CBroe Ja, das war ein Fehler beim Schreiben des Beispiels, für Klarheit. Der Kopf und der Körper enthalten keine zweite Gruppe von Tags. – KrisFoster

Können Sie die Antwort mit anhaltendem Experiment. In meinem Fall war es mir möglich, viel konsistentere Ergebnisse zu erhalten, aber das Setzen der HTML mit den CSS-Links NACH dem Setzen des <body> Inhalts. IE scheint mit der Anwendung des CSS viel besser umzugehen, obwohl ich nicht sagen kann warum.

Zuvor schien es, dass Styling (Farben, Schriftarten, Hintergründe usw.) angewendet wurde, aber keine positionellen Dinge wie Größen, Standorte, Display-Layouts usw. Die Einstellung nach dem <body> Inhalt scheint dies zu adressieren.

Quelle

2016-09-15 10:30:58 KrisFoster

Ich verstehe nicht wirklich den Punkt, dies zu tun. Die beste Vorgehensweise wäre, dass Sie eine andere Seite erstellen und Variablen über die URL senden, um Inhalte dynamisch zu generieren.

In jedem Fall sind Chrome und Firefox "intelligenter" als IE. Sie müssen einige HTML-Validierungsprobleme haben. Ich kann sehen, dass in Ihrem Beispiel die <doctype> fehlt.
Ich empfehle Ihre myWindow Variable zu drucken und überprüfen, ob die HTML gültig ist, kann dies dazu beitragen:
https://validator.w3.org/

Quelle

2016-09-14 19:42:16 Dranes

Danke, aber wie ich oben erwähnt habe, ist es gültig HTML. – KrisFoster

Dies ist ein wenig von einer Vermutung der geringen Menge an Informationen (keine vollständige minimalen HTML-Textsatz gegeben, keine Details zur Browserversion usw. zum Beispiel) Sobald die Seite gerendert ist, wählen Sie ein Element mit Layout (z. B. ein div) und erzwingen Sie einen erneuten Fluss der Seite. Hier ist eine Funktion, die das tun soll - durch die Abfrage der Eigenschaft. - dies ist nicht getestet

function forceReflow(myelement){ 
    var myforceheight = myelement.offsetHeight; 
}

Einige Hintergrundinformationen hier: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Quelle

2016-09-14 19:56:35

Einstellung von HTML von window.open() seltsame Styling-Probleme in Internet Explorer

Antwort

Verwandte Themen