<!DOCTYPE html>
<html lang="it">
<title>Gamefic</title>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1><strong><em>TEST</h1></em></strong>
<input id= "text" type="text" value="" placeholder="Inserisci la tua idea qui"> <br> <br>
<input id="button" type="button" onclick="c()" value = "premi questo pulsante">
<button onclick="BB()">Test</button>
<p id="b"></p>
</body>
<script src="script.js"></script>
<script> function BB(){
var fs = require('fs')
fs.appendFile('IDEE.txt', 'Hello!', function(err, data){
console.log(data)
})}
</script>
</html>
If somebody knows how to fix this problem or how to implement fs in HTML code I would appreciate it very much.
I have tried almost everything.
Thanks
require is not part of Javascript's standards. That part of code that you have, namely
function BB(){
var fs = require('fs')
fs.appendFile('IDEE.txt', 'Hello!', function(err, data){
console.log(data)
})
}
looks very much like NodeJS code that is to append some content to a file on your server's filesystem. However, this is only supported on your server, not in your browser. This might be confusing if you work on your machine and use a browser in the same machine, but don't think about this considering your special case as a developer. Instead, think about the users. Your server's code, the NodeJS will run a remote machine from the users' perspective, while that server will send out the web-page to their browser whose job is to display it.
Now, browsers do not really allow file writing on users' file system in general, because in that case a malicious server could cause a lot of harm for the users. So, in order to avoid these dangers, file operations via the browser is very limited.
The proper way to work with files is to develop some server-side code, in your case that would be Javascript under NodeJS, judging by your code and that server-side code should be triggered by a request sent by the user where a message would be sent. The server, on its turn would take that message and append to the file after proper validations, of course.
Related
I want to build a live Pythonn compiler similar to those at w3schools for Python, for some examples on my blog. I tried different approaches, and would like to hear different oppinions, but as of yesterday I'm trying to implement it using PyScript.
The documentation I found for PyScript doesn't help me a lot, as it seems like I can't understand it, or doing something wrong.
Here's the code that I'm trying to implement:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">something</textarea>
<button onclick="myFunction()">Click me</button>
<py-script id="demo">
print("Hello, world!")
</py-script>
<py-terminal></py-terminal>
<script>
function myFunction() {
var text1 = document.getElementById('area1').value;
document.getElementById("demo").innerHTML = text1;
}
</script>
</body>
</html>
It just prints the content of the textarea above the terminal, without executing the code and printing the output, inside the terminal, as I imagined.
I'm expecting to make this functinal, and I tried a few things, but unsuccessfully.
I also tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">print("something")</textarea>
<script>
let text1 = document.getElementById('area1').value;
</script>
<py-script>
def print_to_page(x):
exec(x)
</py-script>
<button py-click="print_to_page(text1)" id="print">Run!</button>
</body>
</html>
But I'm not sure how to pass the variable from JS to PyScript.
This 'Answer' is meant to help in addressing:
"I tried different approaches, and would like to hear different oppinions [sic],"
You may want to check out this post:
https://twitter.com/jtpio/status/1523660682708668416 May 2022
"The #SymPy Online Shell is now powered by the #pyodide stack and JupyterLite💡
You can try the latest SymPy release directly in your browser, without installing anything, by visiting the following URL:
https://sympy.org/en/shell.html
Many thanks to Ivan Savov for leading this effort!"
Something like that may integrate well with your blog. You can hack around on it and hopefully put together what you need combined with that example and the documentation.
Related resources:
'Embedding the REPL on another website' section in the JupyterLite documentation
Embedding Jupyter Everywhere - Easily embed a console, a notebook, or a fully-fledged IDE on any web page.
Alternative approaches:
JupyterBook and MyST-NB seems to be moving along this route. For example see the Render option the left side there.
I'm not sure all the pieces are together but you can imagine with the JupyterLite/pyodide stuff it soon will be set for blogs.) Quarto may be heading that way, too.
See also Make Jupyter notebook executable in html format
Based on your description and the second example, it looks like you want to have a textarea where the user types in Python code, and run button that executes that entered code when clicked. If I've misunderstood your goal, you can disregard this answer.
The way to bring JavaScript objects/variables into Python is using Pyodide's import js syntax, which treats the JavaScript global namespace like a Python module. Here's a version very similar to your second example, which imports JavaScript's document object and uses that to extract the value of the textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<textarea id="area1" rows="15">print("something")</textarea>
<py-script>
from js import document
def runTextInTag(id):
src = document.getElementById(id).value
exec(src)
</py-script>
<button py-click="runTextInTag('area1')" id="run">Run!</button>
</body>
To address your first example, which changes the innerHTML of the py-script tag itself: A <py-script> tag executes its contained code exactly once, when the custom element is attached to the DOM. This happens shortly after PyScript initializes and the custom HTML element <py-script> is defined, or when you add an additional <py-script> tag to the page.So, in your first example, setting the innerHTML/innerTEXT of a <py-script> tag does not cause that code to be executed again.
You could create a new <py-script> tag with the appropriate innerText and add it to the DOM, at which point its code would be executed, but I think the above method is cleaner for most purposes.
I'm very new here and hope I can express myself clearly.
I'm a teacher and I'd like to create a single html file with interactivity (kind of empty form) that can be loaded without any server : student should for example be provided a file like myform.html.
This means html, css and javascript should all be in the document.
Once the students have opened and filled their names and answers, i'd like them to be able to save locally the modified document as another .html - Let's say johndoeform.html - file.
If I load a simple html file from my local storage and I fill - for example textareas - and try to save the modified page with "save as" in my web browser (safari) I get the unmodified page when I open it again.
I'm aware that an app that stores a lot of datas should rely on a server and data base app. But for a simplistic form/quiz that really should be loaded without any additional software nor an internet connection I feel that this way should be more straight forward.
I'm a noob with java script and I've seen quite some things around about generating blobs with html content but I'm not sure how to get the whole modified document, generate a blob with it then save the whole thing via a new html document.
Perhaps a JS generated download link could do the trick ?
For the purpose here's a simple example of code I could use :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Search on wikipedia</h3>
What's the difinition of ENERGY:<br>
<textarea id="energyDef" placeholder="Write your definition here and save your work" cols=40 rows=6>
</textarea>
<p>Click the button to save as an html file.</p>
<button type="button" onclick="saveHtml()">Save</button>
<script>
function saveHtml() {
// how can I generate and export the whole modified page from here
}
</script>
</body>
</html>
Let me start by giving the answer and saying you probably shouldn't do this and instead below for reason and better solutions
You can take the value of the textarea and directly modify the innerText of it to hard code the answer into the html and then simply export it by using a blob
You can add classes to the answer field and loop through it so that you wouldn't have to manually enter the code for each field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Search on wikipedia</h3>
What's the difinition of ENERGY:<br>
<textarea id="energyDef" placeholder="Write your definition here and save your work" cols=40 rows=6></textarea>
<p>Click the button to save as an html file.</p>
<button type="button" onclick="saveHtml()">Save</button>
<script>
function saveHtml() {
answer_field = document.getElementById("energyDef");
answer_field.innerText = answer_field.value;
var a = document.createElement("a");
var file = new Blob([document.documentElement.outerHTML], {type: "text/plain"});
a.href = URL.createObjectURL(file);
a.download = "dump.html";
a.click()
}
</script>
</body>
</html>
A better way would be to export the data as a machine readable file like JSON , and implement a simple drag and drop to load the data back if you need it as shown in the html file.
Having it as a machine readable format would allow a much easier time to import into a database in the future or simply allow you to easily be able to write a script to get percentage of correct answer for a given question by the class for simple fixed answer
It would also allow you to quickly glance just the answers with a simple notepad program if proper formatting was used in the export process, ie the "space" parameters in JSON.stringify()
I have a variable in javascript that depends on an input from
<input type="text" id="inputfunction" value="">
<button onclick="example">Example</button>
<p id="input"></p>
In the js script I have used document.getElementById("input").innerHTML = inpt; to place this variable on the page.
The variable comes out similar to say '3x+8' however I want this to be formatted with mathjax. To facilitate this I currently have
<head>
<link rel='stylesheet' type='text/css' href='Stylesheet1.css'/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
in my html document, however this doesn't output the variable formatted. I have tried using document.getElementById("input").innerHTML = \\(inpt\\); or placing $$ on either side of it however this just puts it on the page as \(inpt\) or $$inpt$$. Is there any way to have it so that mathjax formats the variable?
Okay so I eventually found it and it was a really easy fix. I just added
MathJax.Hub.Typeset();
at the end of the function and that makes MathJax look back over the page to format anything else. Apparently you shouldn't call this directly though because MathJax may be performing other actions so to counteract any issues this may cause you can write
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
which makes sure MathJax has finished all other processes before typesetting the page stop any synchronisation errors.
I am trying to save a page as a PDF file, and to do so I am trying to read the content of that page then using a PDF library to create the file.
The issue I am facing is that when reading the content using below code I am receiving "Please enable JavaScript to view the page content." instead of the page content
<?php
$url='https://www.carfax.com/VehicleHistory/p/Report.cfx?vin=1J4RR5GG5BC586221&csearch=0&partner=GAZ_0';
//file_get_contents() reads remote webpage content
$lines_string=file_get_contents($url);
//output, you can also save it locally on the server
echo htmlspecialchars($lines_string);
?>
How can I bypass this java-script error or should i use a different approach ?
This is the response I am getting:
<html>
<head>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="CacheControl" content="no-cache"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="data:;base64,iVBORw0KGgo="/>
<script> (function(){ var securemsg; var dosl7_common; window["bobcmn"] = "11111010101010200000002200000005200000000289128f7a200000096300000000300000000300000006/TSPD/300000008TSPD_101300000005https200000000200000000"; window.jar=!!window.jar;try{(function(){try{var jj,Jj,Lj=1,Zj=1,Sj=1;for(var ij=0;ij<Jj;++ij)Lj+=2,Zj+=2,Sj+=3;jj=Lj+Zj+Sj;window._O===jj&&(window._O=++jj)}catch(Ij){window._O=jj}var oJ=!0;function OJ(J){J&&(oJ=!1,document.cookie="brav=ad");return oJ}function _J(){}OJ(window[_J.name]===_J);OJ("function"!==typeof ie9rgb4);OJ(/\x3c/.test(function(){return"\x3c"})&!/x3d/.test(function(){return"'x3'+'d';"})); var iJ=window.attachEvent||/mobi/i.test(window["\x6e\x61vi\x67a\x74\x6f\x72"]["\x75\x73e\x72A\x67\x65\x6et"]),IJ=+new Date+6E5,ol,_l,Il=setTimeout,jL=iJ?3E4:6E3;function JL(){if(!document.querySelector)return!0;var J=+new Date,O=J>IJ;if(O)return OJ(!1);O=_l&&ol+jL<J;O=OJ(O);ol=J;_l||(_l=!0,Il(function(){_l=!1},1));return O}JL();var LL=[17795081,27611931586,1558153217]; function oL(J){J="string"===typeof J?J:J.toString(36);var O=window[J];if(!O.toString)return;var s=""+O;window[J]=function(J,s){_l=!1;return O(J,s)};window[J].toString=function(){return s}}for(var ZL=0;ZL<LL.length;++ZL)oL(LL[ZL]);OJ(!1!==window.jar);(function(){var J={decrypt:function(J){try{return JSON.parse(function(J){J=J.split("l");var O="";for(var s=0;s<J.length;++s)O+=String.fromCharCode(J[s]);return O}(J))}catch(s){}}};return J={configuration:J.decrypt("123l34l97l99l116l105l118l101l34l58l34l110l111l34l44l34l100l101l98l117l103l103l105l110l103l34l58l34l110l111l34l44l34l109l111l100l117l108l101l49l34l58l34l101l110l97l98l108l101l100l34l44l34l109l111l100l117l108l101l50l34l58l34l101l110l97l98l108l101l100l34l44l34l109l111l100l117l108l101l51l34l58l34l101l110l97l98l108l101l100l34l44l34l109l111l100l117l108l101l52l34l58l34l101l110l97l98l108l101l100l34l125")}})(); var sL=3;window.Ls={Os:"087ba4d0fa0178004caafc50a30d48046efd9a15f604d0926f4f95da1a85d369a6d1815489a54acc4a49a5998f87f099792ce5cf3c00ed82cb613e80bec837da827a4967e05d64d8670f7d97250745b00db5a2d96701cfc9d19e00ad5ebfd2aff76046976642518c76938888a8f784eed5b5ea881a1e3668f9b030002df03262"};function l(J){return 645>J}function L(J){var O=arguments.length,s=[];for(var S=1;S<O;++S)s.push(arguments[S]-J);return String.fromCharCode.apply(String,s)}function z(J,O){J+=O;return J.toString(36)}(function SL(O){O&&"number"!==typeof O||("number"!==typeof O&&(O=1E3),O=Math.max(O,1),setInterval(function(){SL(O-10)},O))})(JL());})();}catch(x){document.cookie='brav=oex'+x;}finally{ie9rgb4=void(0);};function ie9rgb4(a,b){return a>>b>>0}; })(); </script>
<script type="text/javascript" src="/TSPD/086821c3deab2000f497f4a10d45047d2c741eba0afdeced26cf36a836d13b181cb57773ccf959f0?type=7"></script>
<noscript>Please enable JavaScript to view the page content.</noscript>
</head>
<body> </body>
</html>
The problem is that the site is doing javascript detection on the page you're trying to load meaning that's more than likely serving up a mostly blank document with noscript tags and script tag to load the rest of the content. You cannot bypass this with cURL the way you are trying. Instead you'll need a headless browser with a javascript engine. Selenium Web Driver is one such solution. I found this gist for you as well: https://gist.github.com/evandrix/3694955
This post is just to learn something, Recently I came across a domain called as www.content-queen.me/PtWkz in a page from facebook.com, on clicking the post with this link it redirected me another domain http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=undefined&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2...Initially I dint see it, but the next time I did with another url, the same thing happened..so my question is how to do it, I know how create a redirect, as it can be done in .htaccess, but this kind of redirect is very new and interesting, And I even tried to dissect the code and found this source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8">
<title>When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong" />
<meta property="og:description" content="You never know when any deed done by you can make anyone's day. Hence, being on the good side of the threshold is always preferable. Jessica Dunbar definitely understands the effect good actions have and she is definitely doing everything the right way. Especially, when it is about men in uniform. When she notices a group of cops sitting in her section, this happens." />
<meta property="og:url" content="http://www.content-queen.me/PtWkz" />
<meta property="og:image" content="http://cdn.wf-media.com/18644/pvoaelaw7buvswooe47x.jpeg" />
<meta property="og:site_name" content="www.content-queen.me" />
<meta property="article:section" content="Pictures" />
<a href="https://www.viral9.com/tr_hs_vs/PtWkz" id='myLink'></a>
<style type="text/css">
#myLink {
display: none;
}
</style>
</head>
<body>
<div id="output">
</div>
</body>
</html>
<script type="text/javascript">
// view_count_update();
function view_count_update()
{
var jUTM = "utm_source=SOURCE&utm_medium=referral&utm_campaign=CAMPAIGN&utm_hash=HASH";
var redirect_url = "http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=SOURCE&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2";
redirect_url = redirect_url.replace("SOURCE", document.referrer.split('/')[2]);
window.location = redirect_url;
}
function myFunc(){
}
//hello
</script>
<script>
try{
(function(){
var d = {
'user_id' : "33",
'url_id' : "2609257" ,
'advertiser_id' : "1",
'user_agent' : navigator.userAgent,
'campaign_id' : "18362" ,
}
$.ajax({
url: "http://www.asapoo.com/mysql_testing",
type:'GET',
data: d,
success : function(data) {view_count_update();},
error : function(){ view_count_update();},
complete: function() {view_count_update();},
timeout : 2000
});
})();
}catch(e){ view_count_update(); }
</script>
<script src="//c.fqtag.com/tag/implement-r.js?org=T6tuwESp3TrUwruYu4eZ&p=NOTSET&a=33&cmp=PtWkz&rt=display&sl=1&fmt=banner&ctu=http%3A%2F%2Fwww.wittyfeed.com%2Fstory%2F18644%2Fwhen-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong%3Futm_source%3DSOURCE%26utm_medium%3DSOCIAL%26utm_campaign%3D33-campaign%26utm_hash%3DPtWkz%26i%3D2&fq=1"></script>
I hope there will be guys who would have done this here and would like to learn how to do it.
That code is pretty much it, really. The redirects are coming from a site set up just for that. It most likely has a database driving it, mapping those random strings of letters to sites. Then it had a template for the page you posted here where it fills in values from the database.
You can see in the code where it updates a page view counter. Then, right after that it sets window.location to where they want you to go, which makes the browser load the page.
This is called a url shortener, you need a back-end script to do the redirect.
The application works as follows, when a request for www.content-queen.me/PtWkz, it will analyze the url. and take the random string PtWkz as a key, this key is connected to the orginal url and the relation stored somewhere in database or cache memory.
What the script do is to match the short string to the orginal url and send to our browser http redirect 302.
There are some feathers to the shortener like you can change the destination the original url with keep sharing the short url.
The back-end script can be written in all programing languages and scripts, you may use python or php for it.
There are many online url shortener services like goo.gl and bitly.com.