I am trying to learn preloading of images using PreloadJS.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="easeljs-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="soundjs-0.4.0.min.js"></script>
<script>
var stage, output, queue;
function handleComplete() {
var backgroundImage=new createjs.Bitmap("myImg");
stage.addChild(backgroundImage);
stage.update();
}
function init() {
stage = new createjs.Stage("demoCanvas");
queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", handleComplete);
queue.loadFile({id:"myImg", src:"Background.png"});
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="1300" height="600">
Your browser does not support canvas
</canvas>
</body>
</html>
When I load the page, I get this error:
Access is denied: preloadjs-0.3.0.min.js, line 50 character 333
I traced the Call Stack and found out the error is generated from the following line:
queue.loadFile({id:"myImg", src:"Background.png"});
Can you tell me where have I gone wrong?
The path type (absolute/relative) shouldn't matter, however where you are loading it from might.
By default, PreloadJS will try and load content using XHR (XMLHttpRequests), which work only when loading on a server (file:// won't work, you should use localhost instead), and from the same domain. You can try passing false as an argument to LoadQueue to have it load the image using tags, which gets around most of those errors.
queue = new createjs.LoadQueue(false);
The errors you usually get from XHR loads are cross-origin errors though, not "Access is denied". If you are loading from your filesystem, make sure the file isn't read only, or have some sort of protection.
Related
I've been using javascript and paperscript to make a test program and have an interesting problem. I got this error message: Uncaught ReferenceError: veiw is not defined, I realised that I had mis-spelled view and corrected it in my code. But for some reason the error message persised, I've restarted my computer and used ctrl+f to search for 'veiw' in my files, but still the error message persists.
Here is my current code:
console.log("Hi");
view.onFrame = function(event){
project.importSVG('.../mario.svg');
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./scripts/paper-full.js"></script>
<script type="text/paperscript" src="./scripts/script.js" canvas="myCanvas"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>
</body>
</html>
And I don't know if this is relevant but there seems to be a file generated by paper js each time the webpage is loaded called VM followed by a number.
document.__paperscript__ = function(paper,project,setup,clear,paper) {var module = { exports: {} }; veiw.onFrame = function(event){
project.importSVG('.../mario.svg');
};
//paper.setup(htmlCanvas);
//paper.project.clear();
//paper.project.importSVG('mario.svg');
return module.exports;
}
As you can see both the type and a few comments that have since been removed from the source file are still here. But I have saved the file and reloaded the page (using the url:http://localhost:8000/html.html with python's http.server running the server).
I am clueless as to what is causing this, and I can't find a reference to veiw anywhere in any of my files. Please help me. I'm being haunted by a typo I made a week ago. It won't go away.
I figured it out. And I'm posting this so other people don't have the same problem. This occurs because chrome, which I am using saved webpages so they load faster, so when you change your code... it recognises that it is the same page and doesn't load the new stuff. This can be fixed by going to your chrome history chrome://history/ and clicking 'clear browsing data' then click 'advanced' select 'cached images and files' and unselect everything else, then just set the time at the top so that you don't delete too many things you don't want to.
NOTE:
Doing this wont delete any important data, the only reason not to select 'Time range: ALL TIME' is so that webpages load faster, which is the reason this data is stored in the first place.
So i'm trying to test out using Howler.js to play an audio file. When I run this html file and press the button I get an error in console saying "An array of source files must be passed with any new Howl."
html:
<!DOCTYPE html>
<html>
<head>
<title>Play Sound</title>
<script src='./howler.js/dist/howler.js'></script>
</head>
<body>
<button id="btn">Play</button>
<script>
var pong = new Howl({urls: ['sound.mp3', 'sound.ogg']});
document.getElementById('btn').onclick=function(){pong.play();}
</script>
</body>
</html>
Should be
var pong = new Howl({
src: ['sound.mp3', 'sound.ogg']
});
Just for future solution hunters, src property is not working with all browsers. I used chrome canary and it worked.
In your soundsData object, are you using src: ['sound1.mp3'] or something similar? Note that v2 has a breaking change where you have to rename urls to src
This is important for me as I have a PRN file which can be printed only through command prompt. And I want to delete that file after the print command is given.
So these 2 commands can be executed using batch file only.
And when I try to use activexobject in javascript, my firefox browsers doesnt run it.
<script>
MyObject = new ActiveXObject("WScript.Shell");
function Runbat()
{
MyObject.Run("\"D:\\abc.bat\"");
}
</script>
Together in a html page.
I've found this one and it seems working properly :)
<html>
<head>
<script language="JavaScript" type="text/javascript">
MyObject = new ActiveXObject("WScript.Shell")
function Runbat()
{
MyObject.Run("\"D:\\test.bat\"");
}
</script>
</head>
<body>
<h1>Run a Program</h1>
This script launch the file any bat File<p>
<button onclick="Runbat()">Run bat File</button>
</body>
</html>
Now I don't really know if you are already working with exaclty that solution, if so, and you are still facing this issue in firefox you may need to investigate a little bit more in browser security to know if that is even possible as of this post states that:
No, that would be a huge security breach. Imagine if someone could run
format c:
whenever you visted their website.
I have this piece of code. I can see the iframe content but it seems that edp0 is always undefined. Why?
<!DOCTYPE html><html>
<body>
<iframe src="DOM-copyB.html"></iframe>
<script>
ed = document.getElementsByTagName('iframe')[0].contentDocument;
edp0 = ed.getElementsByTagName('p')[0];
edp1 = ed.getElementsByTagName('p')[1];
alert(edp0);
</script>
</body></html>
Here is DOM-copyB.html:
<!DOCTYPE html><html><head></head>
<body>
<p>A<b>B</b>C</p>
<p>1<b>2</b>3</p>
</body></html>
Your JavaScript is probably running before the iframe's content is loaded. Try running your code in window.onload and see if that helps:
window.onload = function() {
ed = document.getElementsByTagName('iframe')[0].contentDocument;
edp0 = ed.getElementsByTagName('p')[0];
edp1 = ed.getElementsByTagName('p')[1];
alert(edp0);
};
If you're not running the code from a server, though, I suspect after you get the code to successfully reference the iframe content, you'll get an error like this in the Chrome console due to Cross-Origin security:
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
If you run them from a server, that error should go away. See this question for more details on that:
Using iframe with local files in Chrome
I'm not sure about javascript. But jusing jQuery would be much easier:
<iframe src="DOM-copyB.html" id="myFrame"></iframe>
<script>
$("#myFrame").contents().find("p");
</script>
Here is my problem - I'm trying to write a self-updating application, but I keep getting an error saying that runtime.air.update.ApplicationUpdaterUI() does not return a constructor.
Here's the relevant section of the code; there are other javascript files being included, but I don't think that any of them would be actively breaking AIR itself.
<html>
<head>
<script type="text/javascript" src="./js/AIRAliases.js"></script>
<script type="text/javascript" src="./js/jquery-1.3.1.js"></script>
<script src="ApplicationUpdater_UI.swf" type="application/x-shockwave-flash"></script>
<script>
$(document).ready( function() {
var appUpdater = new runtime.air.update.ApplicationUpdaterUI(); // line 64 in this example
}
</script>
</head>
<body> ... stuff ... </body>
</html>
And the error that I get when I test it is
TypeError: Value is not a constructor. Cannot be used with new.
at app:/index3.html : 64
at app:/js/jquery-1.3.1.js : 2912
at app:/js/jquery-1.3.1.js : 686
at app:/js/jquery-1.3.1.js : 2916
at app:/js/jquery-1.3.1.js : 2936
Verify the path in that script tag for the SWF, I'm guessing you do not have the reference to the ApplicationUpdater_UI.swf correct.
Air is basically complaining that it cannot find a runtime.air.update.ApplicationUpdaterUI() method to call anywhere, which likely means it can't find the SWF (or I suppose it's possible the SWF is corrupted).
Not sure if this is related, but neither $(document).ready nor .load will work if you load the .swf before the script. Make sure you put the .swf reference at the very bottom of your page.