2012-03-28 4 views
0

erstellt I ein Element in einem äußeren JavaScript-Datei:Bezug auf dem Element durch document.write eingefügt

var element = document.createElement('div'); 

Jetzt muß ich das lement an den Körper angehängt und immer noch die Referenz halten, um es (element Variable).
Aber ich muss es direkt nach dem Skript-Tag anhängen - wie document.write() würde es tun.

Ich kann nicht Klassen und IDs für das Skript und das Element selbst verwenden - ich bin nicht auf meiner Website und es könnte mehr als eines dieser Skripte sein.

Wie löst man diese Aufgabe?

CONTEXT: Ich möchte einige Widgets erstellen, die auf anderen Websites verwendet werden können.

+0

Warum sollten Sie Ihre Benutzer nicht entscheiden lassen, wo diese Widgets platziert werden sollen? –

+0

Sie entscheiden, wo Sie es platzieren, indem Sie das Skript-Tag einfügen. Wie Youtube macht es mit ihren Iframe eingebetteten Codes. Leider kann ich keine iframes verwenden. – czerasz

Antwort

1

Wie wäre es damit:

if(typeof globalScriptCounter === "undefined") 
    var globalScriptCounter = 1; 
    else 
    globalScriptCounter++; 

var scripts = document.getElementsByTagName("script"); 
var localCounter = 0; 
for(var i = 0; i < scripts.length; i++) { 
    if(scripts[i].src === "yourwidget.js") { // You should know the path since it is your widget 
    localCounter++; 

    if(globalScriptCounter === localCounter) { 
    document.body.insertBefore(element, scripts[i]); 
    break; 
    } 
} 

EDIT: ich meinen Code bearbeitet. Versuch es!

+0

Du hast mein Leben gerettet! Nach ein paar kleinen Korrekturen habe ich meinen Code gefunden - siehe unten. – czerasz

+0

Toll, ich mag es, wie du meine Idee aufgegriffen hast. Gute Arbeit! – Amberlamps

0

Nur das Erstellen des Elements ist nicht ausreichend. Verwenden Sie document.body.insertBefore, document.body.appendChild und andere Funktionen, um sie der Seitenelementliste hinzuzufügen.

Beispielfunktion

function addElement() 
{ 
    // create a new div element 
    // and give it some content 
    newDiv = document.createElement("div"); 
    newContent = document.createTextNode("Hi there and greetings!"); 
    newDiv.appendChild(newContent); //add the text node to the newly created div. 

    // add the newly created element and it's content into the DOM 
    my_div = document.getElementById("org_div1"); 
    document.body.insertBefore(newDiv, my_div); 
} 

Ref: from mozilla

+0

... Ich kann nicht Klassen und IDs für das Skript und das Element selbst verwenden - ich bin nicht auf meiner Website und es könnte mehr als eines dieser Skripte .... – czerasz

0

Wenn Sie das neue Element erstellen, werden Sie es bis zu einem gewissen Variablenname zugeordnet wird. Sie können also den Variablennamen selbst als Referenz auf die Variable verwenden.

+0

Ich verschmutze nicht die globale Reichweite . – czerasz

0

landete ich mit dieser Quelle auf:

Definitionen für meinen Rahmen (ich glaube, es sind fair):

  1. jedes Widget Skript-Tag ein dort myNamespace-widget-script Klasse
  2. hat, ist ein global myNamespace Objekt


Das Widget Skript:

!function() { 
//-->BEGIN GET WIDGET INDIVIDUAL ID 
var localWidgetCounter = 0; 
if (_.isUndefined(myNamespace)) { 
    myNamespace = {} 
} 
if (_.isUndefined(myNamespace.widgetsCounter)) { 
    myNamespace.widgetsCounter = 0; 
} else { 
    localWidgetCounter = myNamespace.widgetsCounter += 1; 
} 
//-->END GET WIDGET INDIVIDUAL ID 

$.domReady(function() { 
    var teaser = ...here i generate my html DOM elements... 
     teaser.insertAfter($('.myNamespace-widget-script')[localWidgetCounter]); 
}); 

}.call({}); 
Verwandte Themen