Define variable before javascript load - javascript

I noticed that you can't import a javascript file and define a variable in the same <script>.
This is my problem:
<script type="text/javascript" src="js.js">
var id = "587587";
</script>
Is there a way to load the javascript after the variable without using another <script> tag?

If a script tag has a src attribute, anything between the script tags is ignored. The only way you could do something like this is by dynamically adding a new script tag with an ugly hack like this.
<script type="text/javascript">
var id = "587587";
document.write('<script type="text/javascript" src="js.js"><\/script>');
</script>
Using another script tag before the one with the id would certainly be the preferable and shorter solution.

src
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script.html
So, you either have an external script, or you have something inside the <script> tag. You shouldn't have both at once; I'm not sure whether this actually does anything or not.
Use a second script tag.

A script element must either contain script code between the script start and end tags, or reference external script code via the src= attribute. It cannot do both. However, your external code can reference the details of your HTML via the DOM (Document Object Model). So you can treat any HTML element (e.g. a text input field) as a parameter to be passed to your external javascript, where it can be read by e.g. var param = document.getElementById('param').innerHTML;

Related

Set ID with Jquery getScript

I need to add this script with Jquery getScript, how can I add the attribute ID?
$.getScript('https://cdn.asksuite.com/infochat.js?dataConfig=https://control.asksuite.com/api/companies/hotel-latitud-buzios', function () {
ID --> How to add this
});
Script:
<script id="script-infochat" src='https://cdn.asksuite.com/infochat.js?dataConfig=https://control.asksuite.com/api/companies/hotel-latitud-buzios'></script>
getScript has no feature that makes that possible.
Instead, create the script element using the traditional way ($('<script></script>', attributeObject) and append it to your document.
If you have control over the script you are importing, consider using currentScript instead of depending on specific IDs.

Does there exist a method of removing a single HTML tag and NOT the entire node?

I have the following code
<noscript>
<img src="url/HugeCatPicture.jpg" name="I dont want this image to auto load">
</noscript>
I wish to remove only the opening noscript tag and leave the closing noscript tag.
Can this be done with pure JavaScript?
Is such an action even possible?
(No javascript library solutions please)
Html document is node based, and if you delete noscript then it's child also gets removed. For this
read child elements of noscript
get noscript and it's parent DOM
remove nosrcript and append child elements to noscript parent node
I would say that this is improper use of the <noscript> tag. From the W3C documentation about noscript:
The noscript element is used to present different markup to user agents that don’t support scripting
You can use the pure javascript as :
<script>
// on page reload use this
var str = '<noscript><img src="image_url" name="test"></noscript>'
var res = str.replace("<noscript>", "");
document.getElementById("your_id").innerHTML = res;
</script>

Remove JavaScript code from page with JavaScript

I have a chunk of JavaScript code:
<script src='blah.js' type='text/javascript'></script>
How can this be removed or disabled with JavaScript?
If the script tag is received in a string via AJAX:
str = str.replace("<script src='blah.js' type='text/javascript'></script>", "");
However, if the script tag is in the current document, there is no way to disable it, because:
If it is in the part of the document which has already been parsed (i.e. above the current script), it has already been executed. While you can remove the script element, just like any element, there is no way to rewind time and automatically undo the effects the script has.
If it is in the part of the document which has not yet been parsed (i.e. below the current script), you cannot affect it, as it does not exist yet.
You can grab the script like any other element, you can do this:
document.querySelector("script").remove();
If you have a lot of script tags you can just grab the one you want like accessing a array element like so:
document.querySelectorAll("script")[1].remove();
The code above removes the second script tag in a page.

How can Javascript in the head access elements in the body?

I often see some JavaScript libraries that are called in the head tag of an html page. However, if these libs call an element in the body tag, there'll be a response (still from the head tag). When I try to call an element from the head, there is no response - why?
Thanks in advance. :)
The browser parses the html page from top to bottom, executing any <script> blocks in place as it finds them. Which means if the JavaScript attempts to access elements on the page it can only see those included higher in the page because the ones lower down have not been parsed yet.
There are two ways to deal with this:
Put your <script> block at the bottom, just before the closing </body> tag (or at least put it after the elements it needs to reference), and/or
Use an onload (or, if you like jQuery, a $(document).ready()) handler.
One way to setup an onload handler is like this:
<head>
<script>
window.onload = function() {
// this function will be called by the browser after
// the entire page has loaded and thus code in the function
// can access any element on the page.
};
</script>
</head>
<body>
... various elements ...
</body>
You may have also seen something like this:
<body onload="someFunction();">
Where someFunction() can be defined in a <script> block in the <head>. It's basically the same thing, but it's so 1990s to do it with an attribute in the html like that. (Actually even the window.onload() is out of date now, but it works and I don't have time to explain the .addEventListener() method.)
That's beacause you propably are trying to call elements before they exist, ie. the HTML isn't parsed yet. To avoid this, you have to wait untill the page is completed, and then execute your script.
To achieve this, you have to assign your function into a onload-event. For example:
<body onload="your_func">

How to insert an element at the current position in HTML using prototype

How do you insert an HTML element dynamically (using prototype) at the current position if you don't know the id of the parent element? All examples I've seen assumes the element has some kind of id.
I.e.
<script>
function addSomeHtmlAtCurrentPosition()
{
current_element = ...; // Magic?
current_element.insert(...);
}
</script>
<div>
<script>
addSomeHtmlAtCurrentPosition();
</script>
<!-- should insert something here... -->
</div>
<div>
<script>
addSomeHtmlAtCurrentPosition();
</script>
<!-- ... and then here -->
</div>
I've tried using prototype with $$('div').last(), but that doesn't seem to work (last() sometimes reports back another div if I use libraries such as livepipe).
What I really want is something similar to document.write, but using prototype instead of raw html.
The only way I can think of is finding the <script> element and insert the element before/after the script. The thing is, all DOM methods need a DOM node to operate on. Executing scripts that modify the DOM before the document has loaded isn't a good and safe idea.
Similar questions linked below.
JavaScript: get the current executing <script> node?
How may I reference the script tag that loaded the currently-executing script?

Categories

Resources