[FRAGE] Innerhtml script ausführen nach ajax aufruf

emmis · 07. März 2017

Hallo,

ich lade mit einem Maus-Klick Inhalte (HTML-Elemente, Formulare) per AJAX in ein DIV nach. Jetzt möchte ich aber auch Javascript mit dem Ajax-Nachladen im nachgeladenen Bereich ausführen. Das funktioniert (natürlich) nicht, da ein Update per Ajax wohl die Scriptausführung verhindert. Jetzt habe ich verschiedene Möglichkeiten gefunden, wie man das Problem eventuell lösen kann: JQuery, equal() ... doch einerseits verstehe ich das nicht ganz und jQuery möchte ich umgehen ... und natürlich auch ganz gern verstehen. Und wofür das ganze? Die nachgeladenen Ebenen können Editoren. Farbwähler ... enthalten, die beim Aufruf per JS Formular-Elemente oder DIVs beeinflussen.

Ganz grob geht es also darum, ein DIV nachzuladen, welches eben andere Elemente und zumindest ein auszuführendes Script enthält. Vielleicht kann mich hier jemand auf den richtigen Weg bringen.

Die "Seite"

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript" SRC="intranet_data/design_functions.js"></SCRIPT>
</head>
<body  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="hggrau-e8e8e8" >
<div style="width:0px; height:0px;" id="editordiv"></div>
<div style="position:absolute; height:20px; width:40px; top:35px; left:35px;" onclick="Loader.register('editordiv|indajax|166;58;7;;1;1|1|5')"></div>
</body>
</html>

der nachzuladende Bereich mit einem Beispielscript (indajax(.html))

HTML:

<div id="teilvonirgendwas" style="height:100px; width:100px;">
<script>alert('Hello');</script>
</div>

der AJAX-Part (design_functions.js)

Code:

// AJAX DATA //////////////////////
var LoaderObject = function()
{
  this.connection        = false;
  this.running        = false;
  this.requestQueue      = new Array();
  this.requestCounter      = 0;
  this.requestQueueCounter  = 0;
};


LoaderObject.prototype.initialize = function()
{
  if (window.XMLHttpRequest)
  {
    this.connection = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    try
    {
      this.connection = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        this.connection = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        return false;
      }
    }
  }

  return true;
};


LoaderObject.prototype.runRequest = function()
{
  if(this.running)
  {
    return false;
  }

  if(!this.connection)
  {
    var reconnected = this.initialize();
    if(!reconnected)
    {
      return false;
    }
  }

  this.running = true;

  var request = this.requestQueue[this.requestCounter];

  if
  (
    !request['url'] ||
    !request['elementId'] ||
	!request['art']
  )
  {
    return false;
  }

  try
  {
    this.connection.open('GET', request['url'], true);
  }
  catch(e)
  {
    return false;
  }

  this.connection.onreadystatechange = function()
  {
    if (Loader.connection.readyState == 4)
    {
      if (Loader.connection.status == 200)
      {
      	if(Loader.requestQueue[Loader.requestCounter].art == 1)
		{ 
			document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;
		}
		
		if(Loader.requestQueue[Loader.requestCounter].art == 2)
		{
			window.parent.document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;
		}
		
        Loader.requestCounter++;
        Loader.requestQueueCounter--;

        if (Loader.requestQueue.length > Loader.requestCounter)
        {
          Loader.running = false;
          setTimeout("Loader.runRequest()",100);
        }
        else
        {
          Loader.running = false;
          Loader.requestQueue = new Array();
          Loader.requestCounter = 0;
          Loader.requestQueueCounter = 0;
        }
      }
      else
      {
        alert('connection error : '+Loader.connection.status);
      }
    }
  };

  this.connection.send(request['send']);
  return true;
};


LoaderObject.prototype.add = function(requestObject)
{
  var requestsParams = requestObject.split('|');
	
  this.requestQueue[this.requestQueue.length] = {
      'elementId'	: requestsParams[0]    || false,
      'url'			: requestsParams[1] + ".html?idx=" + requestsParams[2] + "&xi=" + requestsParams[4]  || false,
	  'para'		: requestsParams[2]    || false,
	  'art'			: requestsParams[3]    || false,
	  'anwendungid'	: requestsParams[4]    || false
};

  this.requestQueueCounter++;
}


LoaderObject.prototype.register = function(request)
{
  if(typeof(request) != 'string')
  {
    return false;
  }

  var requestObjects  = request.split(',');

  if(typeof(requestObjects) == 'object')
  {
    for(var index in requestObjects)
    {
      this.add(requestObjects[index]);
    }
  }

  if
  (
    !this.running &&
    this.requestQueueCounter > 0
  )
  {
    this.runRequest();
  }

  return null;
};

var Loader = new LoaderObject();

... ich habe das Ganze versucht möglichst zu vereinfachen.

Wie kann ich es hinbekommen, dass HTML-Elemente kombiniert mit JS nachgeladen werden kann, ohne dass das JS seine Funktionalität verliert?

kkapsner · 08. März 2017

emmis schrieb:
da ein Update per Ajax wohl die Scriptausführung verhindert.

Nein, es ist .innerHTML. Dabei werden <script>-Nodes einfach nicht ausgeführt. Im Grunde genommen musst du die <script>-Nodes im Nachgang neu erstellen und ausführen lassen:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<button id="withoutExecution">load html without js execution</button>
<button id="withExecution">load html with js execution</button>
<div id="output"></div>
<script type="text/javascript">
(function(){
    var html = "text<script>alert(\"Executed!\")<\/script>";
    var output = document.getElementById("output");
    document.getElementById("withoutExecution").addEventListener("click", function(){
        output.innerHTML = html;
    });
    document.getElementById("withExecution").addEventListener("click", function(){
        output.innerHTML = html;
        Array.prototype.forEach.call(output.getElementsByTagName("script"), function(scriptNode){
            var newScriptNode = document.createElement("script");
            if (scriptNode.src){
                newScriptNode.src = scriptNode.src;
            }
            newScriptNode.text = scriptNode.text;
            output.replaceChild(newScriptNode, scriptNode);
        });
    });
}());
</script>
</body>
</html>

emmis · 08. März 2017

Vielen Dank erst mal für Deine Antwort.

Damit muss ich mich erst mal beschäftigen ;-). Das mit dem innerhtml (deshalb auch der Titel) war schon klar.
... und zusehen, wie ich das in die bestehenden Struktur hineinbekomme.

[FRAGE] Innerhtml script ausführen nach ajax aufruf

emmis

New member

kkapsner

Super Moderator

emmis

New member