We Keep Coding

Placing Amazon Banner | Angular V4

I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}

After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.

Create element from external js-script and insert into html

I'm trying to create a widget. Something like google-adsense blocks, so I need to call the same script from different places of the page. Is it possible to create an element in external js-script and insert it to the place where I called the script?
I do this:
<div><script type="text/javascript" src="loader.js"></div>
<div><script type="text/javascript" src="loader.js"></div>
Loader.js:
var div = document.createElement('div');
div.setAttribute('class', 'inner-div');
document.body.appendChild(div);
And I have:
<div><script type="text/javascript" src="loader.js"></div>
<div><script type="text/javascript" src="loader.js"></div>
<div class="inner-div"></div>
<div class="inner-div"></div>
But I'd like to get this result:
<div>
<script type="text/javascript" src="loader.js">
<div class="inner-div"></div>
</div>
<div>
<script type="text/javascript" src="loader.js">
<div class="inner-div"></div>
</div>

I think I've found the solution. Find current script tag:
<div>
<script type="text/javascript">
var scripts = document.getElementsByTagName('script');
var script = scripts[scripts.length - 1];
loadScript('loader.js', function () {
loader().init({script: script});
});
</script>
</div>
loadScript function:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
then in loader.js:
init: function(args) {
...
var div = document.createElement('div');
div.setAttribute('class', 'inner-div');
args.script.parentNode.appendChild(div);
...
}

Script Change on Keydown Working Locally, but not on Server

When tested locally the example below works perfectly. It cycles through different jsmovermaps on mouse press, but when I test this on the server it doesn't update the jsmovermap relevant to cursor press. I have uploaded the maps correctly. Any help would be appreciated.
Many thanks!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ireland Map</title>
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="map" id="map">
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.qtip.js"></script>
<script src="jsmovermap1.js" id="s1"></script>
<script>
x=1;
//alert(x);
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
//alert('The "UP" key is being held down...?');
x=x+1;
//alert(x);
//script.src = "jsmovermap"+(x)+".js";
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "jsmovermap"+(x)+".js";;
s.innerHTML = null;
s.id = "map";
document.getElementById("map").innerHTML = "";
document.getElementById("map").appendChild(s);
//alert(s.src);
}
if (evt.keyCode === 40) {
//alert('The "DOWN" key is being held down...?');
x=x-1;
if(x<1){
x=1}
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "jsmovermap"+(x)+".js";;
s.innerHTML = null;
s.id = "map";
document.getElementById("map").innerHTML = "";
document.getElementById("map").appendChild(s);
//alert(x);
}
});
</script>
</body>
</html>
UPDATE!
This is what the console is spitting out after a number of cursor presses.
Resource interpreted as Script but transferred with MIME type text/html: "http://jeremiahambrose.com/maptest/Test/jsmovermap23.js".

PAGEFLIP on AS3 XML can't be seen on IE and FIREFOX

I have an issue and i want to see if someone can help me...
I'm using a PAGEFLIP downloaded from: http://pageflip.hu/ on this project that is inside of a JOOMLA article: http://estudiantes.iems.edu.mx/index.php?option=com_k2&view=item&id=334
MY ISSUE IS THAT I CAN SEE THE PAGEFLIP ONLY ON CHROME AND SAFARI BUT IT DOESN'T RUN ON IE AND FIREFOX, this is not a problem with compatibility, cause it runs on local on Firefox and IE...
I was searching and i think that the issue comes out when I change the URL... This is the ORIGINAL CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>PageFlip4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/pageflip_scalable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.XMLFileName = "pageflipdata.xml";
flashvars.DataFolder = "pageflipdata/";
if (swfobject.getQueryParamValue("page")) {
flashvars.StartPage = swfobject.getQueryParamValue("page");
} else {
flashvars.StartPage = "1";
}
flashvars.StartAutoFlip = "true";
flashvars.AutoStart = "true";
var params = {};
params.scale = "noscale";
params.salign = "TL";
params.wmode = "transparent";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.menu = "true";
params.bgcolor = "#FFFFFF";
var attributes = {};
swfobject.embedSWF("pageFlip.swf", "pageflip", "100%", "100%", "10.0.0", false, flashvars, params, attributes);
</script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
</head>
<body>
<div id="pageflip" style="margin: 0;"></div>
<a id="group1" href="pageflipdata/pages/demo_page_A.png" rel="lightbox[demoGroup1]" title="Page A, group Called from PageFlip Hotspot"></a>
<a id="group2" href="pageflipdata/pages/demo_page_B.png" rel="lightbox[demoGroup1]" title="Page B, group Called from PageFlip Hotspot"></a>
<a id="group3" href="pageflipdata/pages/demo_page_C.png" rel="lightbox[demoGroup1]" title="Page C, group Called from PageFlip Hotspot"></a>
</body>
</html>
I can't see it on Firefox and IE When I change the URL from this SCRIPT lines (this is my code online):
<script type="text/javascript">
var flashvars = {};
flashvars.XMLFileName = "pageflipdata.xml";
flashvars.DataFolder = "http://estudiantes.iems.edu.mx/cired/swfs/ae/fl/noumeno/obj/pageflipdata/";
if (swfobject.getQueryParamValue("page")) {
flashvars.StartPage = swfobject.getQueryParamValue("page");
} else {
flashvars.StartPage = "1";
}
flashvars.StartAutoFlip = "true";
flashvars.AutoStart = "true";
var params = {};
params.scale = "noscale";
params.salign = "TL";
params.wmode = "transparent";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.menu = "true";
params.bgcolor = "#FFFFFF";
var attributes = {};
swfobject.embedSWF("http://estudiantes.iems.edu.mx/cired/swfs/ae/fl/noumeno/obj/pageFlip.swf", "pageflip", "100%", "100%", "10.0.0", false, flashvars, params, attributes);
</script>
So, what i think is incorrect is the way i write it, kind of syntax issue.
Somebody has an idea of what can i try to solve this. Thank you so much! ;)

Try giving full path for XML
or can use HTML like

Passing a variable value to a variable in a script function (Javascript)

I would like to know how to pass the value of a variable in JavaScript file to a variable in a script function which is written on top of the HTML file.
I wrote it like this:
myjsfile.js:
var abc = "10";
HTML file:
<html>
<head>
<script type="text/javascript">
(function() {
var test = document.createElement('script'); test.type = 'text/javascript'; test.async = true;
test.src = 'testquery.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(test, s);
alert(abc);
})();
</script>
</head>
<body>
</body>
</html>
I am not getting the output. Please help! Thanks in advance.
Basically I am trying to create a jquery plugin just like Google analytics.

The script has to load first, try using onload
test.onload=function(){alert(abc);}

<html>
<head>
<script type="text/javascript" src="testquery.js"></script>
<script type="text/javascript">
alert(abc);
</script>
</head>
<body></body>
</html>

try this:
(function() {
var test = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(test);
test.type = 'text/javascript';
test.src = 'testquery.js';
test.onload = function () {
alert(abc);
}
})();​
well.. the onload has already been told but you should at least switch your way of appending it to the head.