I've read roughly 8 different questions here on StackOverflow about this same issue. I've tried a handful of different approaches, most of which involve creating the script element and then adding attributes to it, finalizing by join, append(), appendTo, document.body.appendChild, etc.
I cannot get this script tag to show up before </body>.
Script I need to append to <body>:
<script src="http://ib.adnxs.com/seg?add=1448379&t=1" type="text/javascript"></script>
It's some marketing pixel I need to add to a site that's CMS generated. It has to show up only on ONE page based on the document.location.pathname.
Have you tried?
$("body").append($("<script>", { src : "http://ib.adnxs.com/seg?add=1448379&t=1", type : "text/javascript" }))
I think this will help you
$("<script"+ " src"+"\="+ "http:\//ib.adnxs.com\/seg\?add=1448379&t=1"+" type"+"="+"text\/javascript"+"></script>").appendTo($("body"));
add \ to escape special characters
appendTo() will append just before end of body tag
Console
HTML
Related
I'm not good with script and I can't figure out what's going wrong with my execution.
The webpage is http://snmcsupport.com/map-js-test-page and it should be running a script that produces a clickable map. The script itself is extremely long so I won't paste it here, but you can see it if you click here
On my webpage, I have the markup necessary to run the script in the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js">
</script>
On my webpage, I call the script
<div>
<script type="text/javascript" src="http://snmcsupport.com/wp-includes/js/app.js">
</script>
</div>
But I still can't get the code to run? The initial instructions from the developer also said:
The last step is to initialize the map by making the following script calls:
<script>makeaClickableMap.initialize(<your-document-object-model-handle>);</script>
where your-object-document-model handle can be anything actually:
a jQuery object like $("#map")
a Javascript Document Object Model like document.getElementById("map")
or a simple string like "map"
but I can't figure out what that means. If I try to put in the initialize command in my webpage I get a nasty cross-scripting error and it won't let me.
I'm running this on Wordpress using a Divi Child theme.
makeaClickableMap.initialize(<your-document-object-model-handle>);
//this is the element that will --^
//be used to contain your rendered map
The method makeClickableMap.initialize() expects you to pass it a reference of an HTML element where you want the map to appear. Elements can be identified by
their tag name (div, p, h1, etc.)
a class name <div class="className></div>
OR by id name, which I will demonstrate here:
Firstly, you;ll need an element with an ID associated with it, it should be placed inside the <body> tag:
<div id="map"></div>
underneath this tag, but still within the body tag, you'll need to include the makeClickableMap.initialise call and pass in the ID of this <div>:
<!-- Javascript solution: -->
<script>
makeaClickableMap.initialize(document.getElementById('map'));
</script>
<!-- notice that the id is just 'map' here -->
An alternative to the Javscript solution above is using jQuery as follows (you'll still need the div with the ID):
<!-- jQuery solution: -->
<script>
makeaClickableMap.initialize($('#map'));
</script>
<!-- notice the ID is prefixced with a '#' character-->
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 6 years ago.
To include an external JavaScript file in HTML page you would use this:
<script type="text/javascript" src="images/jquery-2.2.2.js"></script>
The body of this tag is empty, yet I have to type the string script twice. Why isn't XML-style implicit closing tag in HTML, like this:
<script type="text/javascript" src="images/jquery-2.2.2.js" />
If it is valid (at least in HTML5), then how to make sure every browser supporting HTML5 (or XHTML5) can pick up on this usage?
EDIT
I'm gonna take this question to HTML WG. Deprecate the src attribute on <script> as it is the source of this entire confusion, with one of the two options:
<link> tag instead of an empty <script> tag:
<link type="text/javascript" href="images/jquery-2.2.2.js" />
Or optionally with a rel attribute:
<link rel="script" type="text/javascript" href="images/jquery-2.2.2.js" />
PHP-style include() in JavaScript itself: (thus force some content into the tag at all times, and allow multiple scripts to be included in one script tag)
<script type="text/javascript">include("images/jquery-2.2.2.js");</script>
You may not omit the closing tag for the script element. If you do so, the JavaScript runtime will see the following HTML as JavaScript and error out.
The only time you may self-terminate an element tag (<br />) is IF that element, either doesn't have a closing tag (br, link, meta) or the closing tag is defined as optional (li, p).
Now, the reason why you must type the element with an open and closing tag is because that element can contain JavaScript, which makes it a content element. All content elements must always be explicitly closed, unless the spec. says otherwise.
In reality the trailing forward-slash "/" is ignored by the HTML
parser. The only benefit of including it is if the markup were to be
parsed by an XML parser.
So, for an HTML parser, it would see this:
<script type="text/javascript" src="images/jquery-2.2.2.js" />
As this:
<script type="text/javascript" src="images/jquery-2.2.2.js">
And, it would then figure that everything that follows must be JavaScript.
Omitting the closing tag for <script> in HTML5 is not permissible, according to the specs (see the Tag Omission sections):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
https://www.w3.org/TR/html5/scripting-1.html#script
https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
I am trying to use GTM's "Custom HTML Tag" option with the following code but it is giving me the following error: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't work well with certain tag attributes. I'm wondering which one in my code is breaking it. Otherwise the code seems to be standard javascript:
<!-- Add script to header tag-->
<script type="text/javascript" src="https://staygrid.com/js/hapi/web.js?v="20150809"></script>
<script type="text/javascript">
var hlWebEngine = new HotelogixWeb();
function drawEngine()
{
var options = {
container: document.getElementById("webDiv"),
hotelId: "QV5TX0ZSczM0Xzc5Nl9GNXRlcjkwODdzXylkaGZfZHJ0ZXI3Xzc5Nl9oZ2ZoX2deZDg1NA==",
languageId: 1
};
hlWebEngine.draw(options);
}
hlWebEngine.run(drawEngine);
</script>
<!--Div that will hold the web engine-->
<div id="webDiv" style="border-width: 0"></div>
Remove the extra double quotes before your "v" query parameter value, so that it looks like this:
src="https://staygrid.com/js/hapi/web.js?v=20150809"
At least that did the trick for me when I tried it out in my own container.
your src attribute use like given below i think it will work
<script type="text/javascript" src="https://staygrid.com/js/hapi/web.js?v='20150809'"></script>
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
I've been trying some tricks in javascript and came to a ridiculous problem: I can't use <script> as a substring in a javascript string! Here is an example:
<html>
<head>
<script>
alert("<script></script>");
</script>
</head>
</html>
It supposed to print out <script></script>, but instead, I get this:
");
Printed out on the page, as HTML.
Question: How can I use <script> followed by </script> substrings in Javascript, and why is it acting that way?
Here is JSFiddle of it.
What's tripping you up is the </script>. The HTML parser doesn't recognize Javascript strings or nested <script> tags, so it's interpreting that as the closing tag for the initial <script>. That is, this part of the document is parsed as:
<script> (open tag)
alert("<script> (text node - contents of the script)
</script> (close tag)
"); (text node - plain text)
The second </script> is ignored, as there's no other <script> tag for it to close.
To work around this, break up </script so that the HTML parser doesn't see it. For instance:
alert("<script><\/script>");
or:
alert("<script><" + "/script>");
or just put the code in an external Javascript file. This issue only arises for inline scripts.
it is because of the \ I believe. i have no concrete explanation since I am a newbie to Javascript but this code should work:
alert("<script><\/script>");
came up with it using Java knowledge.. Haha since the \ is an escape key in many languages.
Alert(\<script>\</script>\)