Is there a script attribute in HTML for JS, like the style attribute for CSS, I asked this because I'm using an IDE that highlights script attributes inside elements, so I thought it might exist, and if it does, how to use it ?
<element style="it exists, and i know how to use it" script="no clue">...</element>
HTML5, like previous HTML elements, does not have a script attribute but has a script element: https://www.w3.org/TR/html5/scripting-1.html#the-script-element. You can either put some script directly between <script> and </script> tags, or use the script element to refer to an external JavaScript file.
The JavaScript itself can then dynamically (e.g. on load) add event listeners to HTML elements that need to respond to specific events.
No, there is no 'script' attribute. The IDE is probably doing a match on the pattern, without regard to context.
Your IDE is simply highlighting any tag attribute. Try making up some gibberish, and you'll see that it's highlighted.
As the other answers state, no script attribute exists. From w3.org,
There are two types of scripts authors may attach to an HTML document:
Those that are executed one time when the document is loaded by the
user agent. Scripts that appear within a SCRIPT element are executed
when the document is loaded. For user agents that cannot or will not
handle scripts, authors may include alternate content via the NOSCRIPT
element.
Those that are executed every time a specific event occurs.
These scripts may be assigned to a number of elements via the
intrinsic event attributes.
No there is no standard attribute in HTML 5 called script.
But as previous answers listed, your IDE may highlighted this because it highlight any attribute, or script keyword for something else based on your file type.
Also note that while script is not a standard attribute in HTML 5 but this doesn't mean you can't use it, you can write your own custom attributes to any element to access it using javascript getAttribute
Related
I want to add the manifest attribute during run-time, so the I can control when the Appcache will be downloaded.
Ex: When a user is logged into the application properly,
<html>
// page content
</html>
changes into:
<html manifest="myapp.manifest">
// page content
</html>
Is there anyway I can achieve this using javascript, jquery or anything? What I want to is to control when the Appcache will be downloaded conditionally.(I have already read about having another html inside an iFrame.)
According to the specification, changing the manifest attribute after the document loaded has no effect.
You can still access the html element and change the attribute value, via document.documentElement:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
It just won't do anything.
You can use .attr():
Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element.
$('html').attr('manifest','myapp.manifest');
Normal ways to add an attribute to an element can be used, e.g.
document.documentElement.setAttribute('manifest', 'foo.appcache');
(As #FelixKing points out in a comment, assigning to document.documentElement.manifest does not work, by the specs, since manifest is not defined in the DOM. I was first misled by Chrome’s behavior in this issue.)
However, this has no effect. HTML5 CR says: “The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).”
(Well, it has the effect of being there, so you could use the attribute in styling, retrieve the attribute value, etc. But nothing that would cause application cache operations.)
Try this:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
From the docs:
document.documentElement
Returns the Element that is the root element of the document (for
example, the element for HTML documents).
Try this by jQuery.
$('html').attr('manifest', 'myapp.manifest');
It may not be possible to effectively add the manifest attribute, but it might be possible to remove it and by that you may achieve the same result.
To disable appcache, I use this:
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
Please be carefull, this may not always work!
I want to add a script that applies to a DOM object of a certain type right after it is loaded/rendered. This type of object always comes together with the javascript script, and I want to put them together within some tag. Is it right to do it as below? If so, I suspect span is not the best tag to be used here because it may interact with the way the element inside will be displayed. What tag should I use?
<span>
<div>the dom object to be modified by the script</div>
<script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>
I doubt this is the best way to load your script just after a particular element has been loaded by DOM due to these reasons:-
It makes your page load slower.
User will see your complete page in a discrete way.
Instead you should do this:-
Specify a selector to your element.
Include your single javascript code at the end of body.
Update DOM elements using that script.
EDIT:
Solution1: Append your JS at the end of body so that it has access to all the DOM elements.
Since you are injecting the element in DOM using ajax, you can define a success handler for XHR object which will modify your element in DOM.
Solution2: You can define a separate method in your JS and bind this method on some event. In your HTML markup define a data-event attribute and in your success handler append the element to DOM, extract the data-event using jquery data method and trigger that event.
Atleast it will keep you markup far away from scripting logic.
Some useful Links:
Best practices for speeding up your website - yahoo
Why we should load scripts at end - SO Link
The problem here is the script tag does not know where it is located in the DOM. It would be better to do something like add a class to the element[s] you want to alter. On DOM ready, you look up the element[s] and do your magic.
I would avoid this approach; scripts block the page loading
– so if you did this after several dom elements the page would run slow (or not at all if errors were found)
Try using jquery onready - example here : http://api.jquery.com/ready/
And scripts [usually] need to go on the bottom of the page to allow the page to load first
…there are exceptions to this rule such as the well known modernizer script library that needs to go first so it can evaluate the dom as it loads
I need a Greasemonkey script to customize one of my frequently visited site. How can I make sure my script will excute first, modify the html, end sucessfully, only then allow any inline script runs?
EDIT:
I've splitted my original question into 2. one goes here: Find all elements have any attribute other than some specified attributes (solved)
my real goal with the page is targeting some special elements (which I got from my other question) but an inline script will change some elements's attributes, or even remove those elements. If that script CAN'T be blocked, what should I do?
Is there a general rule, when one should use document.write to change the website content and when to use .innerHTML?
So far my rules were:
1) Use document.write when adding new content
2) Use .innerHTML when changing existing content
But I got confused, since someone told me that on the one hand .innerHTML is a strange Microsoft standard, but on the other hand I read that document.write is not allowed in XHTML.
Which structures should I use to manipulate my source code with JavaScript?
innerHTML can be used to change the contents of the DOM by string munging. So if you wanted to add a paragraph with some text at the end of a selected element you could so something like
document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'
Though I'd suggest using as much DOM manipulation specific API as possible (e.g. document.createElement, document.createDocumentFragment, <element>.appendChild, etc.). But that's just my preference.
The only time I've seen applicable use of document.write is in the HTML5 Boilerplate (look at how it checks if jQuery was loaded properly). Other than that, I would stay away from it.
innerHTML and document.write are not really comparable methods to dynamically change/insert content, since their usage is different and for different purposes.
document.write should be tied to specific use cases. When a page has been loaded and the DOM is ready you cannot use that method anymore. That's why is generally most used in conditional statements in which you can use it to syncronously load external javascript file (javascript libraries), including <script> blocks (e.g. when you load jQuery from the CDN in HTML5 Boilerplate).
What you read about this method and XHTML is true when the page is served along with the application/xhtml+xml mime type: From w3.org
document.write (like document.writeln) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type
Another difference between these approaches is related on insertion node: when you use .innerHTML method you can choose where to append the content, while using document.write the insertion node is always the part of document in which this method was used.
1) document.write() puts the contents directly to the browser where the user can see it.
this method writes HTML expressions or JavaScript code to a document.
The below example will just print ‘Hello World’ into the document
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
2) document.innerHTML changes the inner content of an element
It changes the existing content of an element
The below code will change the content of p tag
<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>
you could use document.write() without any connected HTML, but if you already have HTML that you want to change, then document.innerHTML would be the obvious choice.
I agree with the above comments. Basically:
document.write can be useful while the page is loading, to output new HTML tags or content while the browser is building the document object model. That content is output precisely where the JavaScript statement is embedded.
.innerHTML is useful at any time to insert new HTML tags/content as a string, and can be more easily directed to specific elements in the DOM regardless of when/where the JavaScript is run.
A couple of additional notes...
When document.write is called from a script outside of the body element, its output will be appended to the body element if called while the page is loading; but once the page is loaded, that same document.write will overwrite the entire document object model, effectively erasing your page. It all depends on the timing of document.write with the page load.
If you are using document.write to append new content to the end of the body element, you may be better off using this:
document.body.innerHTML += "A string of new content!";
It's a bit safer.
Why doesn't the defer attribute work on script tags that don't source an external js file in Firefox?
lets say an ancient cms only allows me to add javascript to templated pages via in-page [script]...my code...[/script] tags and strips any html tags entered into the content area field, thus preventing me from embedding scripts just above [/body].
But since all my code does is manipulate the DOM I need it to not run until after the page has loaded and I don't feel like jumping through the hoop of attaching a function to the window's onload which then calls another function which then runs my code.
So, what was the reasoning behind not allowing the defer attribute on script tags that don't use the src attribute?
You can't rely on the defer attribute because it's not widely supported. Use something like this, if you want to execute scripts when the document is loaded.