I want to append two variables to a script tag in react.js. I have created the script tag in the head of the document like so:
const script = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(script);
However, I wish to append two JS variables inside the <script></script> tags, so it is the following:
<script>
var io_install_flash = false;
var io_install_stm = false;
</script>
The following code would add the script to head tag:
const script = document.createElement('script');
script.innerHTML = `<script>
var io_install_flash = false;
var io_install_stm = false;
</script>`
document.head.appendChild(script);
Related
In my app user writes some js code and i insert these code in the script tag and add them in the head tag of html.It was all working fine but when I use for loop in the js function it is getting some extra character after inserting in script tag inner HTML.
User-written function:
var el=element1.get();
var vectors=el.shapes;
var vectorCollection=[];
var correctVectors=[[2,3]];
var dotProducts=[];
for(var i=0;i<vectors.length;i++){
if(vectors[i].type<=5)
vectorCollection.push([vectors[i].startX,vectors[i].startY]);
}
for(var i=0;i<correctVectors.length;i++){
for(var j=0;j<vectorCollection.length;j++){
dotProducts.push(math.dot(correctVectors[i],vectorCollection[j]));
}
}
}
The insert function which user js code as src and insert in inner HTML of script tag:
public static void InsertScriptTag(HtmlDocument doc, string id, string src)
{
HtmlNode head = GetHead(doc);
HtmlNode element = doc.CreateElement("script");
element.SetAttributeValue("id", "autogeneratedcode");
element.SetAttributeValue("type", "text/javascript");
element.InnerHtml = src;
head.AppendChild(element);
}
I have debugged after passing src code to inner HTML it becomes like this:
How do I change the script tag with a script DOM? Previously I used a script like this
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
But I want to use the script DOM. when I change like this, script not working
<script>
var jquerymin = document.createElement('script');
jquerymin.type = 'text/javascript';
jquerymin.async = true;
jquerymin.src = 'https://code.jquery.com/jquery-2.2.2.min.js';
document.getElementsByTagName('head')[0].appendChild(jquerymin);
var jqueryui = document.createElement('script');
jqueryui.type = 'text/javascript';
jqueryui.async = true;
jqueryui.src = 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js';
document.getElementsByTagName('head')[0].appendChild(jqueryui);
</script>
Is DOM script, cant run script jquery.min and jquery.ui?
If you want to use pure Javascript to add (asynchronously) a new script file, you can do this:
<html>
<head>
<title>JS</title>
</head>
<body>
<script type="text/javascript">
var
scriptElement,
script;
scriptElement = document.createElement('script');
scriptElement.src = "https://code.jquery.com/jquery-2.2.2.min.js";
script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(scriptElement, script);
</script>
</body>
</html>
This question already has answers here:
script tag create with innerHTML of a div doesn't work
(3 answers)
Closed 7 years ago.
I'd like to invoke script with <div>, but it doesn't work.
For example, alert(101) was invoked, but alert(201) and alert(202) wasn't invoked.
<html>
<head>
</head>
<body>
<p>start</p>
<div id="abc"></div>
<p>end</p>
<script>
// append script (invoked!!)
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.innerHTML = 'alert(101);';
document.getElementById('abc').appendChild(s);
// append div (not works)
var d = document.createElement('div');
// I'm going to try to add a div, script, multi tags.
// This data will be get via Ajax.
d.innerHTML = "<script type='text/javascript'>alert(201);<\/script><script type='text/javascript'>alert(202);<\/script>";
document.getElementById('abc').appendChild(d);
</script>
</body>
</html>
Can you tell me a solution?
This works for me
// append script (invoked!!)
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.innerHTML = 'alert(101);';
document.getElementById('abc').appendChild(s);
// append div (not works)
var d = document.createElement('div');
var s2 = document.createElement('script');
s2.innerText = 'alert(201)';
d.appendChild(s2);
// I'm going to try to add a div, script, multi tags.
// This data will be get via Ajax.
// d.innerHTML = "<script type='text/javascript'>alert(201);<\/script><script type='text/javascript'>alert(202);<\/script>";
document.getElementById('abc').appendChild(d);
I'm working with amazon payments.
I'm dynamically inserting two scripts, one in head and one in body. But the SCRIPT element in my document BODY says the variable "OffAmazonPayments" in HEAD is not defined. The Variable in question is dynamically inserted into the HEAD of the document before the script in BODY, and is available from the console.
setupAmzn: () ->
amazonLoginReady = document.createElement('script')
amazonLoginReady.innerHTML = "
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('CLIENT_ID_OBFU');
}
";
amazonWidgetJS = document.createElement('script');
amazonWidgetJS.src = "https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js";
s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(amazonLoginReady, s)
s.parentNode.insertBefore(amazonWidgetJS, s)
renderAmzn: () ->
console.log("adding the login and pay button scripts")
#setupAmzn()
#create Login and Pay button
payButtonContainer = document.createElement("div");
payButtonContainer.setAttribute("class", "payButtonContainer");
payButton = document.createElement("div");
payButton.setAttribute("id", "AmazonPayButton");
payButtonScript = document.createElement('script');
payButtonScript.innerHTML = 'console.log(typeof OffAmazonPayments === "undefined")';
# !!!!OffAmazonPayments is NOT in scope here
payButtonContainer.appendChild payButton
payButtonContainer.appendChild payButtonScript
proceed = #$('.proceed');
proceed.append(payButtonContainer);
renderAmzn() is called in the render function of my Backbone.view.
What am I doing wrong with the scoping of the variables? thank you.
I am building an image gallery that is slider based and loads new images via javascript and have a requirement to set the Google +1 button's URL via javascript so +1 can be set on each image.
I also need to reload the +1 button based on each image (the url will have a querystring parameter containing the image id to make it unique). Is this possible?
<!-- Place this tag where you want the +1 button to render -->
<div class="g-plusone" data-annotation="inline" data-href="#"></div>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
You can use the following code to alter the gplus href attribute using jQuery. Make sure to include jquery library first and then use the code below:
<script type="text/javascript">
jQuery(".your-button").click(function(){
jQuery(".g-plusone").attr("data-href","Your-Value-Goes-Here");
});
</script>
Write this in head tag:
// Load +1 script
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
The HTML Code:
<div id="plusone_container">
</div>
And write this jQuery anywhere you want to set +1 button's url:
$("#plusone_container").html('<div id="plusone"></div>');
gapi.plusone.render("plusone", { "href": "Your URL" });