marwonline/index.html

## index.html
<html>
<head>

    <style type="text/css">
        .container {
            border: 1px solid red;
            height: 200px;
        }

        .content {
            border: 1px solid orange;
        }

        .loading {
            color: blue;
        }

        .red {
            color: blue;
        }
    </style>
</head>

<body>
<h1>Test01</h1>

<button onclick="loadWidget('widget01', 'plugin.html')">Load this widget!</button>

<div id="widget01" class="container">
    <div class="title"></div>
    <hr/>
    <div class="content">
        <span class="loading">Loading ...</span>
    </div>
</div>


<script>
    var publicAPI = {
      sayHello: function() {
        alert('Called Hello from the plugin.');
      }
    };

  function load_js(container, containerId, script) {
    console.log('load_js', container, script);
    var scriptEl = document.createElement('script');
    scriptEl.type = 'text/javascript';
    scriptEl.innerText = script;
    //script.src = 'source_file.js';
    container.appendChild(script);

    var theScript = script.innerText;
    // the hackiest way possible
    theScript = theScript.replace('{{containerID}}', containerId);
    eval(theScript);
  }


  function loadWidget(containerId, pluginLocation) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {

      console.log("got widget:", this.responseXML.title);
      var container = document.getElementById(containerId);
      console.log("for container:", container);

      // extract the title
      var titleEl = container.querySelector('div.title');
      titleEl.innerHTML = this.responseXML.title;

      // append the body
      var contentEl = container.querySelector('div.content');
      console.log("old content", contentEl);
      contentEl.innerHTML = "";
      contentEl.innerHTML = this.response.body.innerHTML;
      //contentEl.appendChild(this.response.body);
      console.log("new content", contentEl);

      load_js(container, containerId, this.response.head.querySelector("script"));

    };
    xhr.open("GET", pluginLocation);
    xhr.responseType = "document";
    xhr.send();
  }

</script>

</body>
</html>


## plugin.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Widget title</title>

    <style type="text/css">
        .red {
            color: red;
        }
    </style>

    <script>
      function initWidget(containerId) {
        var container = document.getElementById(containerId);
        if (container) {
          var addButton = container.querySelector('button.addButton');
          var removeButton = container.querySelector('button.removeButton');

          addButton.onclick = function() {
            var list = container.querySelector('ul');
            var newElement = document.createElement('li');
            newElement.innerText = new Date();

            list.appendChild(newElement);
          };

          removeButton.onclick = function() {
            var list = container.querySelector('ul');
            var lastElement = list.lastChild;
            if (lastElement) {
              list.removeChild(lastElement);
            }

          };
        }


        publicAPI.sayHello();
      }

      initWidget('{{containerID}}');
    </script>
</head>
<body>
<h2>Widget heading</h2>
<p>
    This is a widget. With custom styling. This here should be <span class="red">red</span>.
    If not the "host" style is used.
</p>
<button class="addButton">Add line to widget</button>
<button class="removeButton">remove line from widget</button>
<ul>
</ul>

</body>
</html>
	<html>
	<head>

	<style type="text/css">
	.container {
	border: 1px solid red;
	height: 200px;
	}

	.content {
	border: 1px solid orange;
	}

	.loading {
	color: blue;
	}

	.red {
	color: blue;
	}
	</style>
	</head>

	<body>
	<h1>Test01</h1>

	<button onclick="loadWidget('widget01', 'plugin.html')">Load this widget!</button>

	<div id="widget01" class="container">
	<div class="title"></div>
	<hr/>
	<div class="content">
	<span class="loading">Loading ...</span>
	</div>
	</div>


	<script>
	var publicAPI = {
	sayHello: function() {
	alert('Called Hello from the plugin.');
	}
	};

	function load_js(container, containerId, script) {
	console.log('load_js', container, script);
	var scriptEl = document.createElement('script');
	scriptEl.type = 'text/javascript';
	scriptEl.innerText = script;
	//script.src = 'source_file.js';
	container.appendChild(script);

	var theScript = script.innerText;
	// the hackiest way possible
	theScript = theScript.replace('{{containerID}}', containerId);
	eval(theScript);
	}


	function loadWidget(containerId, pluginLocation) {
	var xhr = new XMLHttpRequest();
	xhr.onload = function() {

	console.log("got widget:", this.responseXML.title);
	var container = document.getElementById(containerId);
	console.log("for container:", container);

	// extract the title
	var titleEl = container.querySelector('div.title');
	titleEl.innerHTML = this.responseXML.title;

	// append the body
	var contentEl = container.querySelector('div.content');
	console.log("old content", contentEl);
	contentEl.innerHTML = "";
	contentEl.innerHTML = this.response.body.innerHTML;
	//contentEl.appendChild(this.response.body);
	console.log("new content", contentEl);

	load_js(container, containerId, this.response.head.querySelector("script"));

	};
	xhr.open("GET", pluginLocation);
	xhr.responseType = "document";
	xhr.send();
	}

	</script>

	</body>
	</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Widget title</title>

	<style type="text/css">
	.red {
	color: red;
	}
	</style>

	<script>
	function initWidget(containerId) {
	var container = document.getElementById(containerId);
	if (container) {
	var addButton = container.querySelector('button.addButton');
	var removeButton = container.querySelector('button.removeButton');

	addButton.onclick = function() {
	var list = container.querySelector('ul');
	var newElement = document.createElement('li');
	newElement.innerText = new Date();

	list.appendChild(newElement);
	};

	removeButton.onclick = function() {
	var list = container.querySelector('ul');
	var lastElement = list.lastChild;
	if (lastElement) {
	list.removeChild(lastElement);
	}

	};
	}


	publicAPI.sayHello();
	}

	initWidget('{{containerID}}');
	</script>
	</head>
	<body>
	<h2>Widget heading</h2>
	<p>
	This is a widget. With custom styling. This here should be <span class="red">red</span>.
	If not the "host" style is used.
	</p>
	<button class="addButton">Add line to widget</button>
	<button class="removeButton">remove line from widget</button>
	<ul>
	</ul>

	</body>
	</html>