I have a really basic socket.io application that listens on the server side for a button click on an html page.
index.html:
<html>
<head>
<script src="jquery.min.js"></script>
<script src="socket.io.js"></script>
<script src="index.js"></script>
</head>
<body><button id="asdf">click</buton></body>
</html>
index.js:
var socket = io('http://localhost:3000');
socket.on('connect',function(){
$(document).ready(function(){
$('#asdf').click(function(){
socket.emit('0.1');
});
});
});
This part works. What I'd like to do is put this functionality into a chrome extension so that I can have my node app respond to events in the DOM. Right now, I have a background page that injects a script when the extension icon is clicked.
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: 'script.js'
});
});
script.js:
console.log('test');
So this works too, but when I copy and paste the socket.io.js code into the script.js file, nothing is logged to the console, which I assume means that the script isn't working. Why doesn't this work, and is there a better way to integrate socket.io.js into a browser extension?
So I basically ended up connecting to the socket through a background page, and sending messages through that page from the content script, which worked out ok for my application.
Related
It seems when i use TEdgeBrowser and navigate to my html file, that loading external local javascript files in that html does not work. -nothing happens
for example i have in html:
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
And javascript file:
alert('HELLO');
It is simple example that should message me HELLO, but doesn't matter what is in javascript, it just doesn't load.
I don't get any DevTools errors.
When i run the html in normal browser for example chrome or edge on my pc, it works fine.
Also, when i have a script that is not local, but remote, then it works too. So it seems that the problem is only with local files. (I run delphi as administrator).
What could be the problem? I have delphi 10.4.2
I'm trying to load data to my index file remotely. I am able to do it locally with:
<body id="chk">
<script>
$(function(){
$('#chk').load('a.html');
});
</script>
</body>
Which works flawlessly but it is really no use to me as I can't update the a.html file remotely. What I'm looking to achieve is something like this:
$(function(){
$('#chk').load('ftp:/chkblabla.com/public_html/a.html');
});
But of course this doesn't load my data. Can it be done any other way? At the end, my goal is to load some string values to my app without having to make another build (Cordova).
You say "of course this does not load my data", but you don't explain why. Are you able to see javascript errors?
I'm always recommending to use adb to see the errors and warnings which come from the javascript engine: (at least for Mac OS)
adb logcat -v time | grep SystemWebChromeClient
If the problem is related to accessing external site, you will have to adapt your index.html at the line starting with
<meta http-equiv="Content-Security-Policy"
EDIT
I am not sure if this is relevant for you or not. A project I was developing two years ago was including this code:
<!-- include JQ, enable PhoneGap events under JQM, then include JQM -->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$( document ).on( "mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
HTH...
I am trying to load a txt file using jquery in Chrome. Why it does not work? I have copied this code snippet from w3schools, and all i have changed is their url.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://stackoverflow.com/questions/15114993/how-to-embed-a-file-in-html-using-jquery-load");
alert("clicked");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Chrome throws the following error when executing your code:
Origin null is not allowed by Access-Control-Allow-Origin.
You must:
Host your HTML code on your local web server, so that it is accessible at:
http://localhost/your_directory/index.html
Update your code to load your out.txt, placed in the same folder where your index.html file is, like this (using relative paths)...
$("#div1").load("out.txt");
...or like this (using absolute paths):
$("#div1").load("http://localhost/your_directory/out.txt");
And you are done! :-)
Ok the issue you are probably having here seems to happen allot with chrome and ajax requests. Chrome throws a security issue if running locally try putting your code on a web server, or try firefox.
Or if your on a mac you can open chrome using like this from the command line to prevent the security issue
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
There are loads of posts on google if your search for "allow file access from files chrome"
Good luck
My code is like this. But it is not working on any browser. this code has been copy-pasted from w3scools. Same is the condition with my other codes.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
I don't know if this will work, but try adding http: to the beginning of your link reference. Additionally, as others have pointed out, close your <html> tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Another thing I would suggest, is using jQuery's CDN for jQuery hosting. The URL's a lot shorter, and it gets you the latest version without having to define the version:
<script src="http://code.jquery.com/jquery.min.js"></script>
However, I see you're using version 1.8.3, which could be for a specific reason, so just add the version you want after jquery in the url. jquery-1.8.3.min.js.
The link to your jQuery script is not working. Replace it with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Instead.
It wasn't working for me with the old link, but after replacing it with the other link it worked just fine.
(I'm assuming you noticed the missing </html>.)
Your code actually does work (even without the missing html closing tag :-P) but only if it is run from a server. It is all to do with the URI for the jQuery file.
If you run the file locally, the browser guesses that it should download the file using the file protocol, so:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
If you open up your browser's developer tools (by pressing the F12 key usually), it should show you an error saying the browser couldn't load the jQuery file from a file:// URL. If you put http (or https) as the protocol, it knows where to get jQuery from and everything works.
Interestingly if you run the file on a server (which I guess is what w3schools intended) then the browser guesses it should be the http or https protocols and it finds the jQuery file.
If you want to experiment running a webserver without putting in much effort, Python (because it is awesome) lets you run a web server with just one command:
python -m SimpleHTTPServer
It runs the server on:
http://0.0.0.0:8000
and serves the files from the directory where you run it. This url has a little more detail about it: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python
I wasn't aware of the server requirement (thanks for the question!) and I found this in my travels which I thought was interesting. It talks about how the missing protocol is valid html StackOverflow: Is it valid to replace http:// with // in a script tag?
I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?
That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.
Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.
If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.