Javascript: Inline Script with Src Attribute

JavaScript: Inline Script with SRC Attribute?

It's either one or the other, not both. The src attribute of the <script> tag has precedence over the body of the tag.

HTML 4.01 Specification:

The script may be defined within the
contents of the SCRIPT element or in
an external file. If the src attribute
is not set, user agents must interpret
the contents of the element as the
script. If the src has a URI value,
user agents must ignore the element's
contents and retrieve the script via
the URI.

Can i use defer attribute in inline js?

It's not possible. Per MDN:

defer: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

For the functionality you want, you'll have to do one of the following:

Put the script into a separate file and set a src
Put the inline script at the end of the <body>
Wrap the whole code of the script inside a DOMContentLoaded listener

JavaScript Code works inline, but src= reference doesn't

Self-closing <script> tags aren't valid, this:

<script type="text/javascript" src="js/DOTAutocomplete.js" />

should be:

<script type="text/javascript" src="js/DOTAutocomplete.js"></script>

Also note that since you're using a selector $('#' + matchFieldName), the file should either be included after that element is present, or wrap your code in a document.ready handler, for example:

$(function() {
  //your code...
});

Execute Inline JavaScript code within IFrame src attribut

You can't put inline javascript in src attribute. You can use onload event for this. Use the code below

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <script type="text/javascript">
        var hello = function(src1){
            // some logic goes here
            return "mysitename.com";
        }   
    </script>
</head>
<body>

    <iframe width="400" height="400" onload="this.src = hello()">   
    </iframe>

</body>
</html>

Hope this helps you

Is Subresource Integrity any useful for inline JavaScript?

So, is it safe to say that the SRI-related attributes integrity and crossorigin are completely useless for inline JavaScript?

Yes, because those attributes are only useful for a script element that has a src attribute:

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-integrity

The integrity attribute represents the integrity metadata for requests which this element is responsible for. The value is text. The integrity attribute must not be specified when embedding a module script or when the src attribute is not specified. [SRI]

Also as noted in the question, that’s also made clear by the description in MDN:

https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match.

Is it possible to use sourcemaps for inline Javascript in HTML?

With inlined scripts, it is possible to add inlined sourcemaps too. It is done as you state above. Although type="text/javascript" is optional.

<script type="text/javascript">
/* source code... */

//# sourceMappingURL=data:application/json;base64,/* base64'd inline sourcemap */
</script>

The issue I had after inlining the sourcemap was that my inlined script was nameless. So when trying to debug in Chrome Dev Tools, I was unable to open the script in the Sources tab to set debug points. I could not find the script at all. Even checking the HTML page where the scripts are embedded did not help as the inlined scripts are not part of the original HTML source. The inlined scripts are added after the HTML is loaded. I believe this is how PreloadJS loads JavaScript via XHR.

To solve this, you can use //# sourceURL=someFile.js which will apply the name "someFile.js" to your inlined script. You could use any name here, it does not need to be the name of the original source.

Now when you search in Sources tab you will find the script as "someFile.js", you can set debug points and you will be directed to the original source file, provided your sourcemap is correct before base64 encoding.

Below is a link to a resource that describes the behaviour of sourceURL. The entire article is actually really interesting. If you have 5 mins, give it a read. https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl

This MDN article also shows the use of the sourceURL, albeit in eval'd JS code.

How to defer inline Javascript?

The scripts with the defer attribute load in the order they are specified, but not before the document itself has been loaded. As defer has no effect on script tags unless they also have the src attribute, the first script that gets executed is your inline script. So at that time jQuery is not loaded yet.

You can solve this in at least two ways:

Put your inline script in a .js file and reference it with a src attribute (in addition to the defer attribute which you already had there), or

Let your inline script wait for the document and the deferred scripts to be loaded. The DOMContentLoaded event will fire when that has happened:

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        })(jQuery);
    });
</script>

NB: Notice that in the latter case $(document).ready(function() is not included any more, as that would wait for the same event (DOMContentLoaded). You could still include it like you had in your original code, but then jQuery would just execute the callback immediately, which makes no practical difference.

Script File Executing After Inline Script With CDN or External Domain On HTML injection

One way is to use jquery's getScript() function.

But preferably, you may use native javascript to load the script file and then run the inline script.

Maybe i have not understood the question clearly.

Edit:
This is a quote from the HTML5 spec regarding script elements.

If the element has a src content attribute, run these substeps:

Let src be the value of the element's src attribute.

If src is the empty string, queue a task to fire a simple event named
error at the element, and abort these steps.

Resolve src relative to the element.

If the previous step failed, queue a task to fire a simple event named
error at the element, and abort these steps.

Do a potentially CORS-enabled fetch of the resulting absolute URL,
with the mode being the current state of the element's crossorigin
content attribute, the origin being the origin of the script element's
Document, and the default origin behaviour set to taint.

The resource obtained in this fashion can be either CORS-same-origin
or CORS-cross-origin. This only affects how error reporting happens.

For performance reasons, user agents may start fetching the script (as
defined above) as soon as the src attribute is set, instead, in the
hope that the element will be inserted into the document (and that the
crossorigin attribute won't change value in the meantime). Either way,
once the element is inserted into the document, the load must have
started as described in this step. If the UA performs such
prefetching, but the element is never inserted in the document, or the
src attribute is dynamically changed, or the crossorigin attribute is
dynamically changed, then the user agent will not execute the script
so obtained, and the fetching process will have been effectively
wasted.

Then, the first of the following options that describes the situation
must be followed:

If the element has a src attribute, and the element has a defer
attribute, and the element has been flagged as "parser-inserted", and
the element does not have an async attribute The element must be added
to the end of the list of scripts that will execute when the document
has finished parsing associated with the Document of the parser that
created the element.

The task that the networking task source places on the task queue once
the fetching algorithm has completed must set the element's "ready to
be parser-executed" flag. The parser will handle executing the script.

If the element has a src attribute, and the element has been flagged
as "parser-inserted", and the element does not have an async attribute
The element is the pending parsing-blocking script of the Document of
the parser that created the element. (There can only be one such
script per Document at a time.)

The task that the networking task source places on the task queue once
the fetching algorithm has completed must set the element's "ready to
be parser-executed" flag. The parser will handle executing the script.

If the element does not have a src attribute, and the element has been
flagged as "parser-inserted", and either the parser that created the
script is an XML parser or it's an HTML parser whose script nesting
level is not greater than one, and the Document of the HTML parser or
XML parser that created the script element has a style sheet that is
blocking scripts The element is the pending parsing-blocking script of
the Document of the parser that created the element. (There can only
be one such script per Document at a time.)

Set the element's "ready to be parser-executed" flag. The parser will
handle executing the script.

If the element has a src attribute, does not have an async attribute,
and does not have the "force-async" flag set The element must be added
to the end of the list of scripts that will execute in order as soon
as possible associated with the Document of the script element at the
time the prepare a script algorithm started.

The task that the networking task source places on the task queue once
the fetching algorithm has completed must run the following steps:

If the element is not now the first element in the list of scripts
that will execute in order as soon as possible to which it was added
above, then mark the element as ready but abort these steps without
executing the script yet.

Execution: Execute the script block corresponding to the first script
element in this list of scripts that will execute in order as soon as
possible.

Remove the first element from this list of scripts that will execute
in order as soon as possible.

If this list of scripts that will execute in order as soon as possible
is still not empty and the first entry has already been marked as
ready, then jump back to the step labeled execution.

If the element has a src attribute The element must be added to the
set of scripts that will execute as soon as possible of the Document
of the script element at the time the prepare a script algorithm
started.

The task that the networking task source places on the task queue once
the fetching algorithm has completed must execute the script block and
then remove the element from the set of scripts that will execute as
soon as possible.

Otherwise The user agent must immediately execute the script block,
even if other scripts are already executing. Fetching an external
script must delay the load event of the element's document until the
task that is queued by the networking task source once the resource
has been fetched (defined above) has been run.

From this I think that your "external" file is loaded after the inline script block. I would therefore use the "getScript()" function from jquery to make sure that the script is loaded before the inline script block.

Javascript: Inline Script with Src Attribute