externes Skript mit document.write

[heinetz]

Hallo Forum,

auf einer Seite soll ein externes Skript eingebunden werden. Dieses Skript
schreibt mit document.write() beim Seitenaufbau HTML-Code an die Stelle, wo es eingebunden wurde. Etwa so:

<div id="container">  
<script src="extern.js"></script>  
</div>

document.write('text');

... und in meinem Container steht "text".

Was im Firefox ja aber im IE7 nicht funktioniert ist folgendes:

  
<script src="intern.js"></script>  

  
document.writeln('<div id="container">');  
document.writeln('<script src="extern.js"></script>');  
document.writeln('</div>');  

Der "text" zwar da aber nicht in meinem Container, was wenn ich das richtig verstanden habe wohl damit zusammenhängt, dass der IE dann das Skript abarbeitet, wenn es fertig geladen ist, ohne sich drum zu kümmern, wo im Dom es geladen werden soll ... oder so ähnlich.

Gibt es für das Problem eine Lösung?

danke für Tipps und

beste gruesse,
heinetz

[heinetz]

Hallo Forum,

nochmal mit Beschriftungen ...

index.html

<div id="container">

<script src="extern.js"></script>
</div>

  
extern.js  

> `document.write('text');`{:.language-javascript}  
  
  
  
index.html  

> ~~~html
  

> <script src="intern.js"></script>  
> 

intern.js

document.writeln('<div id="container">');
document.writeln('<script src="extern.js"></script>');
document.writeln('</div>');

[torsten]

moinmoin heinetz,

scroll doch mal ein stück nach unten und lies mal diesen beitrag vielleicht ist das hilfreich...

mfg torsten

[heinetz]

Hallo Torsten,

danke für den Hinweis aber ich kann in dem Beitrag leider keine Lösung für mein Problem finden.

beste gruesse,
heinetz

[Felix Riesterer]

Lieber heinetz,

document.writeln('<div id="container">');

document.writeln('<script src="extern.js"></script>');
document.writeln('</div>');

  
das Verwenden von document.write oder document.writeln halte ich für ganz schlecht. Erstens kann man diese Methoden nur während des Ladens auf einer Seite einsetzen und zweitens sind sie wohl noch aus der Prä-DOM-Zeit. Besser mit ref:self812;javascript/objekte/node.htm#append\_child@title=appendChild] und <http://de.selfhtml.org/javascript/objekte/node.htm#insert_before@title=insertBefore> arbeiten.  
  

> dass der IE dann das Skript abarbeitet, wenn es fertig geladen ist, ohne sich drum zu kümmern, wo im Dom es geladen werden soll ... oder so ähnlich.  
  
Wenn die Zeitlichkeiten Dein Problem sind, dann hilft Dir vielleicht dieses Kapitel weiter: [Autostart eines JavaScriptes](http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/framework.htm#autostart)  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[fastix®]

Moin!

Gibt es für das Problem eine Lösung?

Ja. Den Conatiner laden, das externe Skript laden, die darin enthaltene Funktion aufrufen, welche den Container mit innerHTML oder http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild() füllt.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[heinetz]

Hallo Forum,

scheinbar hatte ich mal wieder mein Bespiel nicht "gut formuliert". Ich muss ein externes Skript, in dem document.write verwendet wird, auf einer Site einbinden. Ich kann das externe Skript allerdings nicht direkt im HTML-Code einbinden, was grundsätzlich funktionieren würde, sondern muss es über ein anderes Skript einbinden. Das funktioniert mit dem IE nicht ...

Ich habe einen Ansatz gefunden, der mir gut gefällt und grundsätzlich funktioniert (in jQuery-Syntax):

var buffer = "";  
var temp = document.writeln;  
document.writeln = function(str){buffer += str;}  
  
$("head").append($(document.createElement("script")).attr({"type":"text/javascript", "src":"extern.js"}));  
$('#contentcontainer_div').append(buffer);  
  
document.writeln = temp;

Allerdings nur solange "extern.js" auf dem selben Server liegt.

Kann mir jemand verraten warum?

Unabhängig von der Antwort habe ich eine Lösung gefunden, die funktioniert:

 var buffer = "";  
 var temp = document.writeln;  
 document.writeln = function(str){buffer += str;}  
  
 $.ajax({  
   type: "GET",  
   url: "http://www.example.org/extern.js",  
   dataType: "script",  
   success: function(data){  
    $('#contentcontainer_div').append(buffer);  
    document.writeln = temp;  
   }  
 });  

beste gruesse,
heinetz

[fastix®]

Moin!

Allerdings nur solange "extern.js" auf dem selben Server liegt.
Kann mir jemand verraten warum?

Wenn das Javascript vom fremden Server in Deinem Dokument herumschreibt kann das üble Folgen haben. Der Browser weiß ja nicht, dass Du auch dort Admin genug bist.

Same Origin Policy

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[heinetz]

Moin,

jo, sowas hatte ich mir schon gedacht, verstehe es aber trotzdem nicht
so richtig ;) Muss ich mal verinnerlichen ...

beste gruesse,
heinetz

[ChrisB]

Hi,

Ich habe einen Ansatz gefunden, der mir gut gefällt und grundsätzlich funktioniert (in jQuery-Syntax):

var buffer = "";

var temp = document.writeln;
document.writeln = function(str){buffer += str;}

$("head").append($(document.createElement("script")).attr({"type":"text/javascript", "src":"extern.js"}));
$('#contentcontainer_div').append(buffer);

document.writeln = temp;

>   
>   
> Allerdings nur solange "extern.js" auf dem selben Server liegt.  
>   
> Kann mir jemand verraten warum?  
  
Vermutlich deshalb, weil das Laden des Scriptes asynchron stattfindet, und deshalb beim „länger dauernden“ Laden von extern buffer noch gar nicht gefüllt wurde zu dem Zeitpunkt, wo dieser Inhalt an #contentcontainer\_div angehangen werden soll.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[molily]

var buffer = "";

var temp = document.writeln;
document.writeln = function(str){buffer += str;}

$("head").append($(document.createElement("script")).attr({"type":"text/javascript", "src":"extern.js"}));
$('#contentcontainer_div').append(buffer);

document.writeln = temp;

  

> ~~~javascript

 var buffer = "";  

>  var temp = document.writeln;  
>  document.writeln = function(str){buffer += str;}  
>   
>  $.ajax({  
>    type: "GET",  
>    url: "http://www.example.org/extern.js",  
>    dataType: "script",  
>    success: function(data){  
>     $('#contentcontainer_div').append(buffer);  
>     document.writeln = temp;  
>    }  
>  });  
> 

Diese beiden Lösungen funktionieren ähnlich und jQuery macht intern dasselbe: ein script-Element erzeugen und einhängen. Das funktioniert serverübergreifend. Hier wird nicht XMLHttpRequest verwendet und daher gilt auch nicht die Same-Origin-Policy. Das Laden (und Ausführen) von Scripten von fremden Servern mithilfe eines script-Elements ist möglich.

Bei der zweiten Lösung gibst du jedoch eine Callback-Funktion an, die von jQuery erst ausgeführt wird, wenn das Script geladen wurde. Das ist wichtig, da das Script, wie ChrisB sagte, asychron im Hintergrund geladen wird. Der Zugriff auf die Ergebnisse des Scripts muss warten, bis das Script geladen und ausgeührt wurde – dazu die Callback-Funktion.

Das Event-Handling, das jQuery hinter den Kulissen macht, ist schwierig browserübergreifend umzusetzen. Daher ist es sinnvoll, die Funktionen zu benutzen, die jQuery einem bietet, anstatt händisch script-Elemente zu erzeugen. Eine Kurzschreibweise für die zweite Variante ist übrigens $.getScript()
.

Mathias