We Keep Coding

Dynamic fetch for static HTML page without webserver

There's a static page myapp/page.html and a static file in same directory myapp/data.txt. I would like to open that page in Browser from the file system, without web server, and get content of the myapp/data.txt file. It should be possible periodically reload that file to check if its content changed.
fetch('file:///myapp/data.txt') is not working because of some security error Fetch API cannot load file:///myapp/data.txt
Loading as an image img.src='data.txt' also not working, it loads the file it could be seen in the networking tab, but when you try to read it as the image content it tells that image is broken.
As a last resort it's possible to change data.txt into data.js and load it via script.src='data.js' but maybe it's somehow possible to load it as a text too?

As a last resort it's possible to change data.txt into data.js and load it via script.src='data.js' but maybe it's somehow possible to load it as a text too?
Yeah, you could use the old JSON-P method, but with a statically-named function.
Basically, you have in your main script something like this:
window.onDataLoad = (data) => {
// do something with data here
}
// Inject script tag wherever you want to reload the data
const scriptEl = document.createElement('script');
scriptEl.src = 'data.js';
document.querySelector('head').appendChild(scriptEl);
Then, in your data.js, something like:
window.onDataLoad( << YOUR DATA HERE >> );
Finally... just wanted to note that I sympathize! It's ridiculous that fetch() can't handle this. What a great opportunity to abstract the fetching of data from HTTP, when moving away from XHR. Sadly, this didn't happen.

Button Click in Jade without Script Tag

I saw this code for button click for Jade
button(onclick=foo)
script(foo(){alert('foo');})
I don't want any script tag or any JavaScript code in my rendered page .How can How can I make any button click in Jade from express or node.js file ?

You can use inline javascript :
button(onClick="javascript:alert('foo')")
However, this is not really optimal, and using a script tag/external script makes your code more readable and easier to debug.
You cannot however use a onclick event without using any JavaScript. If your constraints are 'no JS', you cannot have an alert on click (alert is also a javascript function)
If you wish to separate concerns as much as possible, you can have your JS code in a separate .js file, but will still need to include that file in your rendered page.
Edit : An explanation on server/client interactions :
When you create a server in Node/Express, you are generating assets (html pages) from your templates. This generation, as well as what do to when a user reaches a route within your site, are handled by the server.
The server "serves" the source code page (the doc you see by clicking 'view source' to the client, which then interprets it.
If the browser sees Javascript code, it knows how to read it and will add all the events, alerts, etc that you have placed in the code. it will then be able to process those interactions. Your button event in this case has nothing to do with Node/Express
TL;DR : the server only sends source code to the client, who's in charge of reading it and interpreting it.

How can I *locally* save an .html file generated by javascript (running on a *local* .html page)?

So I've been researching this for a couple days and haven't come up with anything conclusive. I'm trying to create a (very) rudimentary liveblogging setup because I don't want to pay for something like CoverItLive. My process is: Local HTML file > Cloud storage (Dropbox/Drive/etc) > iframe on content page. All that works, and with some CSS even looks pretty nice despite the less-than-awesome approach. But here's the thing: the liveblog itself is made up of an HTML table, and I have to manually copy/paste the code for a new row, fill in the timestamp, write the new message, and save the document (which then syncs with the cloud and shows up in the iframe). To simplify the process I've made another HTML file which I intend to run locally and use to add entries to the table automatically. At the moment it's just a bunch of input boxes and some javascript to automate the timestamp and write the table row from the input data.
Code, as it stands now: http://jsfiddle.net/LukeLC/999bH/
What I'm looking to do from here is find a way to somehow export the generated table data to another .html file on my hard drive. So far I've managed to get this code...
if(document.documentElement && document.documentElement.innerHTML){
var a=document.getElementById("tblive").innerHTML;
a=a.replace(/</g,'<');
var w=window.open();
w.document.open();
w.document.write('<pre><tblive>\n'+a+'\n</tblive></pre>');
w.document.close();
}
}
...to open just the generated table code in a new window, and sure, I can save the source from there, but the whole point is to eliminate steps like that from the process.
How can I tell the page to save the generated code to a separate .html file when I click on the 'submit' button? Again, all of this happens locally, not on a server.
I'm not very good with javascript--and maybe a different language will be necessary--but any help is much appreciated.

I suppose you could do something like this:
var myHTMLDoc = "<html><head><title>mydoc</title></head><body>This is a test page</body></html>";
var uri = "data:application/octet-stream;base64,"+btoa(myHTMLDoc);
document.location = uri;
BTW, btoa might not be cross-browser, I think modern browsers all have it, but older versions of IE don't. AFAIK base64 isn't even needed. you might be able to get away with
var uri = "data:application/octet-stream,"+myHTMLDoc;
Drawbacks with this is that you can't set the filename when it gets saved

You cant do this with javascript but you can have a HTML5 link to open save dialogue:
<a href="pageToDownload.html" download>Download</a>
You could add some smarts to automate it on the processed page after the POST.
fiddle : http://jsfiddle.net/ghQ9M/

Simple answer, you can't.
JavaScript is restricted to perform such operations due to security reasons.
The best way to accomplish that, would be, to call a server page that would write
the new file on the server. Then from javascript perform a POST request to the
server page passing the data you want to write to the new file.
If you want the user to save the page to it's file system, this is a different
problem and the best approach to accomplish that, would be to, notify the user/ask him
to save the page, that page could be your new window like you are doing w.open().
Let me do some demonstration for you:
//assuming you know jquery or are willing to use it :)
var html = $("#tblive").html().replace(/</g, '<');
//generating your download button
$.post('generate_page.php', { content: html })
.done(function( data ) {
var filename = data;
//inject some html to allow user to navigate to the new page (example)
$('#tblive').parent().append(
'Check your Dynamic Page!');
// you data here, is the response from the server so you can return
// your new dynamic page file name here.
// and maybe to some window.location="new page";
});
On the server side, something like this:
<?php
if($_REQUEST["content"]){
$pagename = uniqid("page_", true) . '.html';
file_put_contents($pagename, $_REQUEST["content"]);
echo $pagename;
}
?>
Some notes, I haven't tested the example, but it works in theory.
I assume that with this the effort to implement it should be minimal, assuming this solves your problem.

A server based solution:
You'll need to set up a server (or your PC) to serve your HTML page with headers that tell your browser to download the page instead of processing the HTML markup. If you want to do this on your local machine, you can use software such as WAMP (or MAMP for Mac or LAMP for Linux) that is basically a web server in a .exe. It's a lot of hassle but it'll work.

Executing a JavaScript file directly from the browser

This sounds like a trivia question but I really need to know.
If you put the URL of an HTML file in the Location bar of your browser, it will render that HTML. That's the whole purpose of a browser.
If you give it a JPG, or a SWF, or even PDF, it will do the right things for those datatypes.
But, if you give it the URL of a JavaScript file, it will display the text of that file. What I want is for that file to be executed directly.
Now, I know that if you use the javascript: protocol, it will execute the text of the URL, but that isn't what I need.
I could have the URL point to an HTML file consisting of a single <script> tag that in turn points to the JavaScript file, but for occult reasons of my own, I cannot do that.
If the file at http://example.com/file.js consists entirely of
alert("it ran");
And I put that URL in the Location bar, I want "it ran" to pop up as an alert.
I'm skeptical that this is possible but I'm hoping-against-hope that there is a header or a MIME type or something like that that I can set and miraculously make this happen.

This is not possible. The browser has no idea what context the JavaScript should run in; for example, what are the properties of window? If you assume it can come up with some random defaults, what about the behavior of document? If someone does document.body.innerHTML = "foo" what should happen?
JavaScript, unlike images or HTML pages, is dependent on a context in which it runs. That context could be a HTML page, or it could be a Node server environment, or it could even be Windows Scripting Host. But if you just navigate to a URL, the browser has no idea what context it should run the script in.
As a workaround, perhaps use about:blank as a host page. Then you can insert the script into the document, giving it the appropriate execution context, by pasting the following in your URL bar:
javascript:(function () { var el = document.createElement("script"); el.src = "PUT_URL_HERE"; document.body.appendChild(el); })();

Or you can use RunJS: https://github.com/Dharmoslap/RunJS
Then you will be able to run .js files just with drag&drop.

Not directly, but you could make a simple server-side script, e.g. in PHP. Instead of
http://example.com/file.js
, navigate to:
http://localhost/execute_script.php?url=http://example.com/file.js
Of course, you could smallen this by using RewriteRule in Apache, and/or adding another entry in your hosts file that redirects to 127.0.0.1.
Note that this is not great in terms of security, but if you use it yourself and know what you're downloading, you should be fine.
<html>
<head>
<script>
<? echo file_get_contents($_GET['url']); ?>
</script>
</head>
<body>
</body>
</html>

In the address bar, you simply write
javascript:/some javascript code here/;void(0);
http://www.javascriptkata.com/2007/05/01/execute-javascript-code-directly-in-your-browser/

Use Node.js.
Download and install node.js and create a http/s server and write down what you want to display in browser.
use localhost::portNumber on server as url to run your file.
refer to node js doc - https://nodejs.org/dist/latest-v7.x/docs/api/http.html
Run - http://localhost:3000
sample code below :
var http = require("http");
var server = http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.end("hello user");
}); server.listen(3000);`

you can write your own browser using qt /webkit and do that.
when user enters a js file in url location you can read that file and execute the javascript .
http://code.google.com/apis/v8/get_started.html is another channel.
not sure if it meets ur need.

How can you retrieve a pages source code (after javascript has ran) using PHP?

On my page, javascript adds a lot of classes on page load (depending on the page).
How can I wait til javascript has added those classes, then get the HTML using either Javascript or PHP from a different file?

When the page has finished loading, POST the rendered source back to a PHP script using Ajax.
$(function()
{
var data = $('body').html();
$.post('/path/to/php/script', data);
});
(This example assumes you're using jQuery)

It looks like what you need is Firebug. If you are using Google Chrome, you could also use the Google Chrome Developer Tools.
These tools will allow you to view the live DOM of the page as well as track any changes made by your javascript. Tools like these are essential to us as developers.

You can not receive the rendered HTML source by an other resource other than from JavaScript on your page itself. After JS finished all the content changes in the HTML, you could post the HTML source to a PHP on the server and save it.
Pseudo code:
// JavaScript using jQuery
setTimeout("jQuery.post('/catch.php', jQuery(document));", 2000);
// on the server side create a catch.php file
<?php
file_put_contents('./tmp.txt', 'php://input');

You can't, easily.
JavaScript modifies the DOM in memory. This is completely separate entity than the "source" you originally sent to the browser.
The closest thing you can do is build an XML representation of the DOM via JS and send it back to the server via AJAX. Why you would want/need to do this is beyond me.

Open your Bookmarks/Favorites and create a new one with this and then click it after your page loads:
javascript:IHtml=document.documentElement.innerHTML;
LThan=String.fromCharCode(60);
LT=new RegExp(LThan,'g');
IHtml=IHtml.replace(LT,'<');
IHtml=IHtml.replace(/ /g,' ');Out ='';Out+='<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"';Out+=' "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">';
Out+='<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en-US" lang="en-US">';
Out+='<head><title>Inner HTML<\/title><\/head>';
Out+='<body style="color:black;background-color:#ffffee;">';
Out+='Body HTML:<br \/><ul>';
NLine=String.fromCharCode(10);
ILines=IHtml.split(NLine);
for (ix1=0; ix1< ILines.length; ix1++) {
Out+='<li>'+ILines[ix1]+'<\/li>';
}
Out+='<\/ul>';
Out+=' [<a href="javascript:void(0);" onclick="window.close();" title="close">Close<\/a>]';
Out+='<\/body><\/html>\n';
PopUp1=window.open('','IHTML');
PopUp1.document.write(Out);
PopUp1.document.close();