I retrieve some HTML from database via angular and bind it on frontend with $sce.trustAsHtml. There is script that does some actions on retrieved HTML.
Angular controller:
$scope.Page= response.data;
$scope.pageContent = $sce.trustAsHtml($scope.Page.Content);
In page html file:
<div ng-bind-html="pageContent">
And there is script file which is loaded inside page html file:
<script src="scripts/script.js"></script>
This script must be executed after $scope.Page= response.data
What I tried is to use:
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function(){
// script code
}, 2000);
});
And it works, but script file is however loaded immediately after page html file is loaded, it just timeouts "script code". I want to postpone script loading until I retrieve $scope.Page= response.data;
Is there angular directive or something to use on element to load it after $scope.Page is available or some other solution?
In your case, I would recommend you to store the script content in a cdn url or else you can store it in $templateCache in the application. Check the below sample for better understanding.
function sampleController($scope, $templateCache) {
//templateCache will store the template/script
$templateCache.put('myScript', 'alert("hi")');
//function to execute at a point of time
$scope.executeScript = function() {
var scriptContent = $templateCache.get('myScript');
var script = document.createElement('script');
script.type = 'text/javascript';
script.textContent = scriptContent;
document.head.appendChild(script);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="sampleController" ng-app>
<button ng-click="executeScript()">Execute Script</button>
</div>
You can manually create a <script> element and set its src attribute to the desired URL after the HTML content is bound:
var tag = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0];
tag.src = 'scripts/script.js';
firstScript.parentNode.insertBefore(tag, firstScript);
Related
I am using following code inside my HTML to load a JS file after page load.(DOMContentLoaded)
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
But I have several scripts to load and I have no idea how to do this in the best possible way. For example, I have following files to link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
Any help would be greatly appreciated.
If you know upfront the script names you can define an array like:
var scripts = ["script1.js", "anotherscript.js", "whatever.js"];
And then loop through it, and for each script you can append it as you did before
var scriptName;
for (scriptName in scripts) {
// create the script and set the src = scriptName as before
}
Can we realize dynamically loading, of js, css and other files, process?
By getting all needed info (what we must to load) from html tags data attributes?
For example:
<html>
<head>
<title>Our app</title>
</head>
<body data-load-css="style">
<div class="all" data-load-js="jquery|jqueryui" data-load-js-type="async">
<div class="header" data-load-js="main">
Header
</div>
<div class="body" data-load-js="body">
Body
<div class="some-tipsy" data-load-css="tipsy"></div>
</div>
<div class="footer" data-load-js="other">
Footer
<div class="some-other" data-load-css="other"></div>
</div>
</div>
<script>
// our js app to load dynamically js, css
</script>
</body>
</html>
So, maybe you have some ideas how do it in best way? With the best performance and flexibility.
Or I just need to use require js, and don't worry about some "new things"?
If just require js, then how do it best with this js plugin? To load all stuff most dynamically?
And how solve problem with js async, defer loding? Where some scripts must be loaded in specific order.
Here is my continued version 2 of current question: https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies
Following are few ways to load scripts dynamically:
Javascript: Write a custom load function.
jQuery: $.getScript(). For css refer SO-Post.
require.js: require(moduleName)
ECMA 6: import
Following is a pure javascript function to load scripts dynamically:
function(url, callback) {
var scripts = utils.getLoadedScripts(); // Read all scripts and push names in array.
var lastIndex = url.lastIndexOf("/");
var isLoaded = false;
scripts.forEach(function(row, index) {
if (row == url.substring(lastIndex + 1)) {
isLoaded = true;
return;
}
});
if (!isLoaded) {
//$(".reveal").addClass("loading");
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.name = "url";
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
};
You could make use of web workers in your case. You can process the code asynchronously to do the task asynchronously.
Main script:
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage(); // Starts the worker to work;
doWork.js (the worker):
self.addEventListener('message', function(e) {
self.postMessage("Hi, loaded async."); // send the data via postMessage to main script.
}, false);
So, what it means you can put your logic inside doWork.js and put the scripts asynchronously to the user's screen.
I've been trying to load a file using the following code, in a file I've called InterpolatorTest.js:
include("scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/Interpolator.js");
var interpolator = new OneDimensionalInterpolatorTemplate();
This is the include code, which is loaded in the header of every page:
function include(scriptName) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = scriptName;
document.getElementsByTagName("head")[0].appendChild(script);
}
And this is the script I'm trying to include, Interpolator.js:
OneDimensionalInterpolatorTemplate = function() {
}
However, when I try to load the script, I get the following error:
Uncaught ReferenceError: OneDimensionalInterpolatorTemplate is not defined --- InterpolatorTest.js:3
It doesn't seem to be able to access the methods in the loaded script, but it doesn't give me a 404 error so I assume it's loading the script successfully. I've used this include script before with success.
This is the actual code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Page Title</title>
<script type="text/javascript" src="scripts/EssentialUtilities.js"></script>
</head>
<body>
<script type="text/javascript" src="scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/InterpolatorTest.js"></script>
</body>
</html>
I've been working on this for hours and I'm totally stumped. Anyone know what's wrong?
Edit: Thanks to the answer from Alberto Zaccagni, I got it working by installing jQuery and using this code snippet. The issue seems to be that Javascript loads files asynchronously, so I was attempting to call the method before it was loaded. AJAX has a synchronous loading method, so that eliminated the problem. :)
I think that what you're missing is the onload bit, have a look at this question: How do I include a JavaScript file in another JavaScript file?
I include the relevant snippet as reference:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
I am loading external javascript on my site through:
<script language="javascript" type="text/javascript">
document.write("<script src='http://remoteserver/banner.php?id=10&type=image&num=3&width=200'><\/script>");
</script>
Everything was fine, but today was a big timeout from the remote server and page loading on site was blocking.
Is there possibility to load javascript asynchronous or to load it after page loads?
I don't want page load interruption while remote server not working.
I know there are tag async in HTML5, but it's not working, i think because this script is more complex than javascript (its ending with ".php").
Also i know it's better to put javascript files before /body tag to prevent this problem, but it's not the best solution.
Do you know other solutions?
Sync script blocks the parser...
Incorrect Method:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
Async script will not block the rendering of your page:
Correct method:
<script type="text/javascript">
(function(){
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Source: http://www.youtube.com/watch?feature=player_detailpage&v=Il4swGfTOSM&t=1607
You can easily do it by creating DOM nodes.
<script>
var scriptEl = document.createElement("script"); //Create a new "script" element.
scriptEl.src = "http://remoteserver/banner.php?id=10&type=image&num=3&width=200";
// ^ Set the source to whatever is needed.
document.body.appendChild(scriptEl);
// Append the script element at the bottom of the body.
</script>
I used Jquery to insert a variable to div. Please check my code.
var msg = '<script src="https://gist.github.com/3010234.js?file=new.html.erb"></script>'
$('.result').html(msg);
msg variable contains a script that render a code snippet. msg is dynamic variable.
The above code is not working to insert code snippet to div.
Any Idea?
This script generate code snippet like this.
To add script, I would add it to head like this;
var s = document.createElement('script');
s.src = 'https://gist.github.com/3010234.js?file=new.html.erb';
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);
You cannot load a github gist into a page dynamically using that embed code. The embed code is fine if you can add the script tag to the HTML, but to do it dynamically via JavaScript as you are trying to do, it won't work because it relies on document.write().
Instead, use the github gists api:
$.get("https://api.github.com/gists/3010234", function(response) {
$(".result").text(response.data.files["new.html.erb"].content);
}, "jsonp");
Working demo: http://jsfiddle.net/naTqe/
function loadScript() {
var script = document.createElement("script");
script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
script.type = "text/javascript";
document.getElementById("result").appendChild(script);
}
It looks like your remote JS is buggy. I ran it through JS Lint and came up with several errors.
Anyway, here is my working example. Keep a javascript console open and you'll see the error when it tries to parse the remote JS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Jquery test</title>
</head>
<body>
<h1>jQuery</h1>
<p class="result">Some result</p>
<script>
/*<![CDATA[*/
$(document).ready(function(){
var msg = '<script type="text/javascript" src="http://gist.github.com/3010234.js?file=new.html.erb"><\/script>";
$('.result').html(msg);
});
/*]]>*/
</script>
</body>
</html>