I think I'm going crazy, all my searches indicate I am doing this properly, but I am still getting the opposite results. I have two scripts. The first one is the library (RecordRTC), and the second one is my javascript using the library. No matter what I do, my script loads first - and the library loads second. And my browser keeps showing (in the timeline) that this is true, and my script keeps showing the error "RecordRTC not defined" - that my script is calling the library before it has loaded.
Below is ALL the html code I'm using. Please send help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing RecordRTC</title>
<script type='text/javascript' src="http://RecordRTC.org/latest.js"></script>
</head>
<body>
<div id="videos-container">
<video id="video"></video>
</div>
<script type='text/javascript' src="./js/videos02.js" defer></script>
</body>
</html>
Use a validator.
async and defer are boolean attributes. They are either present or they are omitted. You cannot give them the values true and false. async=false is an error that will be error corrected to async is on for this script.
The library is being called before it is loaded because you have said that it can be loaded async and defer so the browser isn't waiting for it before loading the other script.
Related
I'm trying to import the contents of a file (the file itself dosen't matter, html, php, text) - in all cases, I am unable to get any content loaded in. I've even used direct copy past off tutorials and it does not load or work?. I guess I'm missing something, or there is a version conflict maybe?.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#new").load("new.html);
});
</script>
</head>
<body>
<div id="new"></div>
</body>
</html>
This code is taken directly from jQuery website, I've only changed the file being loaded to "new.html" and yes, I have that named file in the same directoy. I've tried both referencing the source from online, and using local jquery file, tried different browsers as well.
When testing, the browser shows a blank page, it's not displaying the text?.
Any ideas what I'm doing wrong?
Thanks,
You should do this instead of JQuery
$(document).ready(function(){
$("#new").load("new.html");
});
// OR
$(function(){
$("#new").load("new.html");
)};
And I would recommend using
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
The reason this wasn't working is that JQuery is deprecated (meaning it shouldn't be used and will error most of the time) you should use $ since it is not deprecated and is the new way to do it. Also you did load("new.html) you missed a extra "
I have added external Javascript at the end of tag in HTML file however, the alert loads first and only on hitting the "Okay" button on alert, the content loads up. Below is my HTML and JS code.
*I already tried putting the script in the and async/defer thing too.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
JS
alert("Hello");
the DOM parsing normally happens on the main thread. So if the main JavaScript execution thread is busy, DOM parsing will not progress until the thread is free.
If the script element is an external script file, the browser will start the download of the external script file off the main thread but it will halt the execution of the main thread until that file is downloaded. That means no more DOM parsing until the script file is downloaded.
You should learn about the steps that happen when a website gets loaded/parsed/rendered
Taken from: https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969#:~:text=When%20a%20web%20page%20is,the%20Render%2DTree%20from%20it.
if you would not have used alert() function, you wouldnt even notice that, but special to alert is that it stops all further execution until you confirmed the alert, regarding the written above, this explains why the page renders after confirming the alert
alert is a synchronous function.
Note that putting the script at the end of the body only means it will be run when the page is parsed and not when the content is shown. The content is only shown afterwards
Because alert is synchronous, it will run first before then showing the content.
You could try putting whatever logic you are doing on the onload event of the window like so:
window.onload = () => {
// logic goes here
console.log('the document has been loaded');
};
Javascript has an asynchonous behaviour. If you want ensure dom loaded before do anything consider use Jquery
https://jquery.com/
before place your Jquery library into your js code:
$(document).ready(function(){
//... all your's stuffs here
});
A PRO TIP: Learn Jquery will lead you create amazing things!!
Best regards
I'm making a small browser game involving p5.js. My HTML is basically this:
<!-- ... -->
<body>
<script type="text/javascript" src="js/vendor/p5.min.js"></script>
<script type="text/javascript" src="js/vendor/p5.sound.min.js"></script>
<!-- ... -->
<script type="text/javascript" src="js/various/other/scripts.js"></script>
<!-- ... -->
<script type="text/javascript" src="js/sketch.js"></script>
</body>
<!-- ... -->
Most of the time this setup works. However, sometimes (when I first load the page in the browser), I get errors like ReferenceError: p5 is not defined from p5.sound.min.js and ReferenceError: loadSound is not defined from sketch.js. When I refresh the page things work fine again, until I close the browser window.
This looks to me like the scripts are executed out of order, because those are the kinds of errors that would be happening if a script was run without its prerequisites having been run. (sketch.js requires p5.sound.min.js requires p5.js.) The order in which I placed them in the HTML is the order in which I want them to run.
I know about async and defer which affect the way the browser loads and executes JavaScript, and I've tried the latter. However:
adding defer to all <script> tags seems to change nothing.
without async or defer (like above), wouldn't the execution order already be guaranteed and correct?
Is there something else I need to keep in mind?
As always, right after posting the question you find a new trail leading to the solution.
Apparently this has nothing to do with JS execution order, but a bug in Firefox that prevents local files from loading if they end in '.min.js'. I think the workaround for now is to load p5 from a CDN, or change the filename to not include min.
as the title says I need to show a div from one website on another. I've created a small test below that afaik should work using jQuery's .load, but when I open it up nothing shows. Any help would be appreciated!
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js">
</head>
<body>
<script>
$('#transaction-section'.load('ajax/http://warburgrealty.com/agent/AGENT-69db6245d34d32e69208161ebcc412fe/samantha-frith #past-transactions-section');
</script>
<div id="transaction-section"></div>
</body>
</html>
You have a couple of things going on.
First, the syntax isn't quite right. I would also move the JavaScript after the div definition.
<div id="transaction-section"></div>
<script>
$('#transaction-section').load('http://warburgrealty.com/agent/AGENT-69db6245d34d32e69208161ebcc412fe/samantha-frith');
</script>
Secondly, unless you are running this code on warburgrealty.com, you are going to run into a cross-origin request error.
You can read more about cross-origin resource sharing here: https://enable-cors.org/
I have a webpage with mostly basic HTML on it. There is one section where I load an RSS feed using JavaScript pulling from an external source (url). The problem is that my page will load everything up until that script, wait for the script to load (sometimes up to a few seconds), then load the rest of the page.
How can I force it to load the script after it has rendered the entire page first?
My code is something like this:
<html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
<more html>
...
Two options:
Put your script block at the end of the page. This is good practice anyways due to the fact that your page strucutre will load before the script that is intended to manipulate it. Because the user generally notices the page loading but not the script, this gives the appearance of a faster load overall.
Include the defer attribute in the opening script tag. Note that defer can only be used on external script files (those with an src attribute). See https://developer.mozilla.org/en-US/docs/HTML/Element/script.
Add the defer attribute to the script tag in the head also works
<script language="JavaScript" src="http://..." type="text/javascript" defer></script>
Reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
A pretty reliable way to make a script load after pageload is to write out the script include itself in javascript.
var theScript = document.createElement("script");
theScript.setAttribute("type","text/javascript");
theScript.setAttribute("src","//www.mysite.com/script.js");
document.getElementsByTagName("head")[0].appendChild(theScript);
You could try wrapping the function that calls the feed in
jQuery(window).load(function(){
//embed RSS feed
});
forcing it to load last.
Move your script tag to the end and it will load after everything else. For example:
<html>
<more html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
</html