I have a variable of the form :
var x = '<script type="text/javascript" language="javascript"> ..lots of stuff...</script>
<script type="text/javascript" language="javascript"> ..even more of stuff...</script>'
and I want to insert it with jquery into my HTML code and execute it.
I tried using the append, html and eval without any luck.
Any ideas?
sample script:
<script type="text/javascript" language="javascript">
var clk = 'http://......';
</script>
<script type="text/javascript" language="javascript" src="http://...."></script>
<noscript>
<img src="http://..." width="120" height="600" border="0" alt="">
</noscript>
this will in the end show an img, which will load asynchronously.
Usually having </script> tags nested within other <script></script> tags will break things. You'll need to split them up like in the Javascript below to not cause browser issues.
Here is a working fiddle:
https://jsfiddle.net/2vrfxrse/
Javascript
var jsCode = '<scr' + 'ipt>var executeTest = function(){ alert("This is a test."); }</scr' + 'ipt>';
$('head').append(jsCode);
HTML
<script>executeTest();</script>
This solution will probably work for your specific scenario:
var rx = new RegExp("<script .*?>(.*?)<\/script>", 'g');
var x = '<script type="text/javascript" language="javascript">alert("..lots of stuff...");</script><script type="text/javascript" language="javascript">alert("..even more of stuff...");</script>';
var res = rx.exec(x);
while (res) {
var s = document.createElement("script");
s.appendChild(document.createTextNode(res[1]));
document.body.appendChild(s);
res = rx.exec(x);
}
JSBin: http://jsbin.com/menocumiya/edit?html,js,console,output
You can use Jquery getScript:
//Moment example
if (typeof moment == "undefined") {
var url = "~/assets/js/moment.js";
$.getScript(url);
}
Or Jquery Function:
$(function(){
var test = "this.Foo = function() {alert('hi');}";
var F=new Function (test);
(new F()).Foo(); //Shows "Hi" alert
});
$(function(){
var test = "this.Foo = function() {alert('hi');}";
var F=new Function (test);
(new F()).Foo(); //Shows "Hi" alert
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Related
Inside my JS function I need to add this:
< script src=https://xxxx.com/c3.js type="text/javascript" async defer>< /script>
How to edit the code the right way?
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
console.log(ab_id_transakce);
}
</script>
If I understand your question correctly, you are trying to add a script tag to the DOM. It seems that you are trying to add the HTML script tag in the Javascript function, which will not work. What you can try is:
Add the script tag directly in the HTML like this:
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
}
</script>
Add the script tag dynamically
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
var script_tag = document.createElement("script");
script_tag.src = "https://xxxx.com/c3.js";
script_tag.type = "text/javascript";
script_tag.async = true;
script_tag.defer = true;
// in case you want to add the script tag to the <head>
document.head.appendChild(script_tag);
// in case you want to add the script tag to the <body>
document.body.appendChild(script_tag);
}
</script>
So I tried this. I put the required code in the head:
<script type="text/javascript">
var callback = function(formatted_number, mobile_number) {
var e = document.getElementById("number");
e.innerHTML = "";
e.appendChild(document.createTextNode(formatted_number));
};
</script>
And then instead of using:
<body onload="_googWcmGet(callback, '0800-123-4567')">
<span id="number">0800-123-4567</span> </body>
I'm using:
<body> <span id="number">0800-123-4567</span> <script type="text/javascript">
window.onload = _googWcmGet(callback, '0800-123-4567'); </script> </body>
It errors out with _googWcmGet being undefined. Think this is due to my lack of knowledge of JS/DOM stuff and that I need to cal _googWcmGet outside the body tag some other way?
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.
I have the following script which I would like to transform into something I can call from a click:
<script type="text/javascript"> if (!window.mstag) mstag = {loadTag : function(){},time : (new Date()).getTime()};</script>
<script id="mstag_tops" type="text/javascript" src="//flex.msn.com/mstag/site/+values+/mstag.js"></script>
<script type="text/javascript"> mstag.loadTag("analytics", {dedup:"1",domainId:"+values+",type:"1",actionid:"+values+"})</script>
<noscript> <iframe src="//flex.msn.com/mstag/tag/+values+/analytics.html?dedup=+values+" frameborder="0" scrolling="no" width="1" height="1" style="visibility:hidden;display:none"> </iframe> </noscript>
I want to do it the same way in which the following script:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = +values+;
var google_conversion_language = "en";
var google_conversion_format = "+values+";
var google_conversion_color = "ffffff";
var google_conversion_label = "+values+";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/+values+/?label=+values+;script=0"/>
</div>
</noscript>
was handled in this thread, with the following suggested solution:
// This takes care of it for jQuery. Code can be easily adapted for other javascript libraries:
function googleTrackingPixel() {
// set google variables as globals
window.google_conversion_id = 1117861175
window.google_conversion_language = "en"
window.google_conversion_format = "3"
window.google_conversion_color = "ffffff"
window.google_conversion_label = "Ll49CJnRpgUQ9-at5QM"
window.google_conversion_value = 0
var oldDocWrite = document.write // save old doc write
document.write = function(node){ // change doc write to be friendlier, temporary
$("body").append(node)
}
$.getScript("http://www.googleadservices.com/pagead/conversion.js", function() {
setTimeout(function() { // let the above script run, then replace doc.write
document.write = oldDocWrite
}, 100)
})
}
// and you would call it in your script on the event like so:
$("button").click( function() {
googleTrackingPixel()
})
But since the original script snippets are different in their structure, I don't know how to do it the same way. How can this one be transformed as well?
EDIT:
Should I do it this way? -
function newScript() {
if (!window.mstag) mstag = {loadTag : function(){},time : (new Date()).getTime()};
mstag.loadTag("analytics", {dedup:"1",domainId:"+values+",type:"1",actionid:"+values+"})
var oldDocWrite = document.write // save old doc write
document.write = function(node){ // change doc write to be friendlier, temporary
$("body").append(node)
}
$.getScript("//flex.msn.com/mstag/site/+values+/mstag.js", function() {
setTimeout(function() { // let the above script run, then replace doc.write
document.write = oldDocWrite
}, 100)
})
}
OK,
If I understand you correctly, you just want to encapsulate the script into a function, so that it can be bound to the click event of an object.
You will need to keep these where they are, the one line imports mstag.js (a javascript library), and we don't need to worry about the iframe.
<script id="mstag_tops" type="text/javascript" src="//flex.msn.com/mstag/site/+values+/mstag.js"></script>
<noscript> <iframe src="//flex.msn.com/mstag/tag/+values+/analytics.html?dedup=+values+" frameborder="0" scrolling="no" width="1" height="1" style="visibility:hidden;display:none"> </iframe> </noscript>
The other two lines can be separated into a function as follows:
<script type="text/javascript">
function newScript()
{
if (!window.mstag)
{
mstag = { loadTag : function() {}, time : (new Date()).getTime()
};
mstag.loadTag("analytics", { dedup : "1", domainId: "+values+", type : "1", actionid : "+values+" });
}
</script>
You will then be able to bind this function to a click event of an object with the jQuery you mentioned:
$("button").on("click", newScript);
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.