I'm injecting a script like so:
var script = $('<script>', {
type: 'text/javascript',
async: true,
src: 'https://script.js'
});
$('script:first').before(script);
This generates markup like:
<script type="text/javascript" async="async" src="https://script.js"></script>
I would prefer the following syntax:
<script type="text/javascript" async src="https://script.js"></script>
Is this supported when passing options to a jQuery DOM element creator? Or, should I just use plain JavaScript to achieve this?
You can set the attribute using plain JS. Doing it through jQuery will auto-populate the value.
var script = $('<script>', {
type: 'text/javascript',
src: 'https://script.js'
});
script[0].setAttribute("async", "");
$('script:first').before(script);
Related
I would like to check using liquid language, if is there somewhere in the page, a script being called twice or more.
For example:
<script src="myscripts.js"></script>
<script src="myscripts.js"></script>
Is it possible using liquid or should I use javascript to validate?
I'm not sure about liquid, but if you wanted to go the JS route, this could work:
//locate all `<script>` tags and save the elements into an array
var scriptTags = [];
document.querySelectorAll('script').forEach(function(tag) {
scriptTags.push(tag)
});
//Put just the URLs of the script tags into an array
var scriptUrls = scriptTags.map(function(tag) {
return tag.src;
});
//Get a list of any URL that appears more than once
var duplicateUrls = scriptUrls.filter(function(url, i) {
return scriptUrls.indexOf(url) != i;
});
console.log(duplicateUrls);
<script src="dupe.js"></script>
<script src="other1.js"></script>
<script src="dupe.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>
I wrote a JS plugin to client's website can load comments from our database via CORS method.
My goal is to wrapper my whole code into an easily embeddable plugin.
Just like the facebook js plugin, Google Analytics plugin. They are easy to install on a website.
My plugin depends on other libraries, such as jquery, underscore, backbone, handlebars, and also my scripts and CSS.
I studied Require.js it seems suitable to do this job for me.
I need to generate an all-in-one javascript plugin, e.g.,. "awesome-comments.min.js".
Some articles suggest me to put all the dependent js files with require.config.
But I'm having no idea how could I do other stuff such as my js scripts with require.js.
Is there any similar application or tutorial has the same function. Thanks.
sample_with_requireJS.html
<html>
<head>
<script src="js/require.js" data-main="js/main"></script>
</head>
<body>
<div id="load_awesome_comments"></div>
</body>
</html>
js/main.js
require.config({
baseUrl: "http://mywebsite/assets/",
paths: {
"jquery": "jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1",
"underscor": "~~~",
...
}
});
sample-without-requireJS.html (This is my current workable html sample, mixed with js, css and html DOM)
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"/>
<script src="http://localhost:3001/assets/jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1" data-turbolinks-track="true"></script>
<style>
body {
/*background-color: linen;*/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.show-more',function () {
var $this = $(this);
....
});
});
window.onload = function(){
.....
}
Handlebars.registerHelper('if_even', function(conditional, options) {
....
});
</script>
<!-- Setup our templates -->
</head>
<body>
<div id="load_awesome_comments"></div>
<script type="text/javascript">
$(document).ready(function() {
function hideFurtherComments(){
.....
}
var Comment = Backbone.Model.extend({
....
});
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
initialize: function() {
....
},
deferred: Function.constructor.prototype,
fetchSuccess: function(collection, response) {
collection.deferred.resolve();
},
});
var comments = new Comments();
var CommentView = Backbone.View.extend({
el: $("#comments_section"),
render: function() {
....
},
});
var EmptyCommentView = Backbone.View.extend({
el: $("#empty_comments_list"),
render: function() {
....
},
});
var commentView = new CommentView({
collection: comments
});
var emptyCommentView = new EmptyCommentView({
collection: comments
});
comments.deferred.done(function() {
....
});
});
var og_url = $("meta[property='og:url']").attr("content");
$("#original_news_article_link").attr("href", og_url)
</script>
<script src="js/require.js" defer async="true" ></script>
</body>
</html>
Give a look at https://webpack.github.io and http://browserify.org/. Their purpose is to do exactly what you need. You pack all of your Javascript code, Javascript dependencies and CSS in one sole JavaScript file.
The advantage of this method is that users can make use of your module just by including a single JavaScript file; no need to worry about dependencies.
The drawback is that, given that the dependencies are all included in the single file, if in a page you have three modules packed this way that use jQuery, for example, the jQuery code will be downloaded three times.
How do I pass a variable to a javascript file?
Here is the call to my js file that I have on my page:
<script src="../js/myfilename.js"></script>
Here is the value that I want to pass into the javascript file:
language_value_xxx = "uk";
Here is the trimmed down javascript file (myfilename.js):
(function (language_value_xxx) {
....
language: language_value_xxx,
....
1.
<script> language_value_xxx = "uk"; </script>
<script src="../js/myfilename.js"></script>
2.
<script data-lang='uk' src="../js/myfilename.js"></script>
// filename.js
var lang = []
.slice
.call(document.querySelectorAll('script'))
.pop()
.dataset
.lang
;
Anyway, this methods are not a good practice at all )
I would like to print the content of a script tag is that possible with jquery?
index.html
<script type="text/javascript">
function sendRequest(uri, handler)
{
}
</script>
Code
alert($("script")[0].???);
result
function sendRequest(uri, handler)
{
}
Just give your script tag an id:
<div></div>
<script id='script' type='text/javascript'>
$('div').html($('#script').html());
</script>
http://jsfiddle.net/UBw44/
You can use native Javascript to do this!
This will print the content of the first script in the document:
alert(document.getElementsByTagName("script")[0].innerHTML);
This will print the content of the script that has the id => "myscript":
alert(document.getElementById("myscript").innerHTML);
Try this:
console.log(($("script")[0]).innerHTML);
You may use document.getElementsByTagName("script") to get an HTMLCollection with all scripts, then iterate it to obtain the text of each script. Obviously you can get text only for local javascript. For external script (src=) you must use an ajax call to get the text.
Using jQuery something like this:
var scripts=document.getElementsByTagName("script");
for(var i=0; i<scripts.length; i++){
script_text=scripts[i].text;
if(script_text.trim()!==""){ // local script text
// so something with script_text ...
}
else{ // external script get with src=...
$.when($.get(scripts[i].src))
.done(function(script_text) {
// so something with script_text ...
});
}
}
The proper way to get access to current script is document.scripts (which is array like HTMLCollection), the last element is always current script because they are processed and added to that list in order of parsing and executing.
var len = document.scripts.length;
console.log(document.scripts[len - 1].innerHTML);
The only caveat is that you can't use any setTimeout or event handler that will delay the code execution (because next script in html can be parsed and added when your code will execute).
EDIT: Right now the proper way is to use document.currentScript. The only reason not to use this solution is IE. If you're force to support this browser use original solution.
Printing internal script:
var isIE = !document.currentScript;
function renderPRE( script, codeScriptName ){
if (isIE) return;
var jsCode = script.innerHTML.trim();
// escape angled brackets between two _ESCAPE_START_ and _ESCAPE_END_ comments
let textsToEscape = jsCode.match(new RegExp("// _ESCAPE_START_([^]*?)// _ESCAPE_END_", 'mg'));
if (textsToEscape) {
textsToEscape.forEach(textToEscape => {
jsCode = jsCode.replace(textToEscape, textToEscape.replace(/</g, "<")
.replace(/>/g, ">")
.replace("// _ESCAPE_START_", "")
.replace("// _ESCAPE_END_", "")
.trim());
});
}
script.insertAdjacentHTML('afterend', "<pre class='language-js'><code>" + jsCode + "</code></pre>");
}
<script>
// print this script:
let localScript = document.currentScript;
setTimeout(function(){
renderPRE(localScript)
}, 1000);
</script>
Printing external script using XHR (AJAX):
var src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
// Exmaple from:
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
function reqListener(){
console.log( this.responseText );
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", src);
oReq.send();
*DEPRECATED*: Without XHR (AKA Ajax)
If you want to print the contents of an external script (file must reside on the same domain), then it's possible to use a <link> tag with the rel="import" attribute and then place the script's source in the href attribute. Here's a working example for this site:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="import" href="autobiographical-number.js">
...
</head>
<body>
<script>
var importedScriptElm = document.querySelector('link[rel="import"]'),
scriptText = scriptText.import.body.innerHTML;
document.currentScript.insertAdjacentHTML('afterend', "<pre>" + scriptText + "</pre>");
</script>
</body>
</html>
This is still experimental technology, part of web-components. read more on MDN
One of the parameters in the script tag may change dynamically -
djConfig="parseOnLoad:true, locale:'fr-fr'
Script tag:
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js"
djConfig="parseOnLoad:true, locale:'fr-fr' />
where locale may be either fr-fr or en-us,...
How do I create the script tag?
I suggest explicitly creating the djConfig object before including the dojo core (as outlined in their docs):
<script type="text/javascript">
var currentLocale;
if([Your Logic Here])
{
currentLocale = 'en-us';
}
else
{
currentLocale = 'fr-fr';
}
var djConfig = {
parseOnLoad: true,
isDebug: true,
locale: currentLocale,
extraLocale: ['ja-jp']
};
</script>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.2/dojo/dojo.xd.js">
</script>
Please check out the dojo docs on the subject.
NOTE: You should never use self-closing script tags.