I have a website and I would like every visitor (or at least every session) to help the site survive. By this, I mean integrating a CoinHive based script so when run once, it will mine (with the user's consent and knowledge) and the popup will automatically close with a popup after this.
For the CoinHive based script, I have the following:
<!DOCTYPE HTML>
<html>
<head>
<title> Sample </title>
</head>
<body>
<form action="?" method="post">
<script src="https://authedmine.com/lib/captcha.min.js" async></script>
<div class="coinhive-captcha" data-hashes="1024" data-key="my_key_here">
<em>Loading Captcha...<br>
If it doesn't load, please disable Adblock!</em>
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For the popup displayed, I have:
function myFunction() {
alert("Thank you for helping. You may now proceed.");
}
Finally, my text on the popup will be:
Dear Visitors. In order to keep this site running, you are required to complete a one-time captcha. This will require you to just click it and wait, however, it will increase CPU and power usage, so using a PC is recommended. This should be the only time you see this. Thank you and sorry for inconvenience.
Could someone help make this into a popup where this is required, users won't be able to scroll or exit and this is one-time?
You can use localStorage :
<script type="text/javascript">
var alerted = localStorage.getItem('alerted') || '';
if (alerted != 'yes') {
alert("Thank you for helping. You may now proceed.");
localStorage.setItem('alerted','yes');
}
</script>
More complete answer : Here
I hope to help you.
Related
I want to create a simple HTML that on load will go to a URL and then put text in a textbox on the page. Below is the HTML that I came up with so far. It will open the page but will not enter the text that I put in.
Any ideas will be appreciated.
Thank you
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<script>
function displayResult(element)
{
document.getElementById(element).value = "TEST";
}
}
</script>
displayResult("sb_form_q");
</body>
</html>
I tried the above code and I wanted it to put the text "TEST" in the text box on the form.
JavaScript (in a <script> element) runs in the current page. Navigating to a new page will kill the currently running JavaScript program.
If you want to run some JavaScript on the subsequent page then you need to put the JavaScript in that page. You, clearly, don't control Bing, so you can't do that.
It would be a major security problem if you could do that.
The nearest you could come to this would be to write a browser extension that had permission to access bing.com.
If you are specifically looking for Bing searches, you will have to introduce parameters into your href="https://Bing.com/"
example: https://Bing.com/search?q=SEARCHTHIS
I want to create a simple login and sign up page. I have created them separately using atom, and they were saved inside the same folder inside my computer. I added a css file and was able to link it to both fine.
Now comes the problem.
Note: This is just a fun little project which is why I only used localStorage.
I created a .js file inside my website folder.
//SIGN UP PAGE
function create(){
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
localStorage.setItem(username, un);
localStorage.setItem(password, pw);
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
if(document.getElementById("usernamel") === localStorage.getItem(username)){
if(document.getElementById("passwordl") === localStorage.getItem(password)){
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}else{
document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
}
}else{
document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
}
}
And made it to add values to the localStorage when create account button is pressed.
<script src="ssjavascript.js"></script>
This is the exact same code I used for both the html files to connect to the js files, and yet, only one works. No matter what, only one of the html files can connect to the js file. I've copied and pasted multiple times. I've tried different tags. I've tried everything I can think of and this is where I beg the internet myself for answers.
To test If it is working, I created an onclick() function to a button and told it to bring me to a separate page. None of it worked, I checked my spelling about 10 times now as well.
Also, Whenever I test the files I open them in browser, so I don't get any error messages. And I can't test them in atom because it just shows the code in a scroll box on view.
Edit:
ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
at login (ssjavascript.js:11)
at HTMLInputElement.onclick (sslogin.html:22)
This is what I got when clicking the button on the non-working page.
login is referring to the button clicked
ssjavascript.js is referring to the file I used to hold the javascript
sslogin.html is the page file
I don't know if this helps, I've lost track quite a bit.
Full Code:
Sign Up page
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="username">
<div id="passwordtxt">
Password:
</div><input id="password"><br><br>
<div id="security">
For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
You are also limited to 1<br>account, creating a new one<br>will erase previous data.
</div><br><br>
<input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
Already Have One? Log In
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
Log in page
<!DOCTYPE html>
<html>
<head>
<title>
Log In
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="usernamel">
<div id="passwordtxt">
Password:
</div><input id="passwordl"><br><br><br><br>
<input type="button" id="submitl" onclick="login()" value="Login"><br><br>
Don't Have an Account? Create One
<br><br>
<div id="errormsg">
</div>
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
the javascript file is already up above, and the profile page is just a blank until I actually figure out how to get someone there.
Also, I changed the Javascript to compare the value to localStorage instead of assigning but it seems to still not work as intended.
EDIT:
Thanks for the suggestions. Even if none of them singularly worked, I still wouldn't have fixed my problem if you guys haven't pushed me to do some more searching.
I found out, that using "" saved my variables as strings, so I used '' and it worked exactly how I wanted.
Again, thanks a lot for your help. :)
I'm starting to experiment with building Chrome extensions (first exposure to HTML and Javascript as well) and got stuck on a basic task. I have the popup.html file, which is what the user sees. What I'd like to do is have some placeholder text that is initially displayed to the user. The popup will also have a button so that when the user clicks on the button the placeholder text is replaced with something else.
Here is what I tested:
popup.html:
<!doctype html>
<html>
<head>
<title>Test Extension</title>
<script src="popup.js"></script>
</head>
<body>
<form id="testForm">
<input id="testButton" type="submit" value="testButton" />
</form>
<h3 id="textHeader">This will change.</h3>
</body>
</html>
popup.js:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('testForm').addEventListener('submit', changeText);
});
When I debug the script, I see the initial addEventListener call which calls changeText and causes the text in the popup to change to 'Changed!'. However, I then see a second call of the addEventListener, which then reverts back to the original popup.html form. The net effect is that 'Changed!' only appears for a brief instant.
Is there a way to make changes to the HTML file in an event listener permanent to get the intended behavior? I realize that I really need to gain an understanding of the DOM model and how Javascript can interact with it in the browser. I'm looking for a book or some other resource to consult (the Mozilla Developer Network site looked like a good authoritative source, but seemed kind of sparse), but in the meantime was hoping to gain at least some additional understanding by working through this simple example. Thanks!
EDIT:
Thank you everyone for the prompt responses! Disabling the form submissions makes sense. I'm adding this edit to my question post because the original task I was trying to achieve did in fact need to make use of a form.
What I'm trying to do is take in input from the user through a form, query an external site (ex: Wikipedia) for the phrase that user typed in, and then display in the popup content that's taken from the query.
Here is a skeleton outline of what I attempted:
popup.html:
<!doctype html>
<html>
<head>
<title>Test Extension</title>
<script src="popup.js"></script>
</head>
<body>
<form id="WikipediaForm">
<input type="text" id="userQuery" size="50"/>
<input id="submitQuery" type="submit" value="Ask Wikipedia" />
</form>
<h3 id="WikipediaResponse">placeholder</h3>
</body>
</html>
popup.js:
function changeText() {
var req = new XMLHttpRequest();
askURL = 'http://en.wikipedia.org/wiki' + encodeURIComponent(document.getElementById('userQuery').value);
req.open("GET", askURL, false);
req.onload = function (e) {
if (req.readyState === 4) {
if (req.status === 200) {
document.getElementById('WikipediaResponse').innerHTML = req.responseText; // i'm just dumping everything for now
}
} else {
console.error(req.statusText);
}
}
};
req.send(null);
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('WikipediaForm').addEventListener('submit', changeText);
});
This again also faces the same issue that I saw with the previous example where the response flashes for an instant before reverting back to the placeholder text. However, I can't follow the earlier answers now because I need the form to be submitted. What is the usual way of changing content in an event listener for a form?
On another note, I'm using the synchronous XMLHttpRequest call, which I know isn't recommend. But when I used the asynchronous call it didn't seem to go through and I couldn't figure out how to fix that, so that's another problem I'm also working on.
Use:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
//Returning false will prevent that the form submission completes
return false;
}
But if your form is never going to send data anywhere, you don't need a form at all (unless you're going to use a reset button for your fields). So you can just add type="button" to your element.
<body>
<input id="testButton" type="button" value="testButton" />
<h3 id="textHeader">This will change.</h3>
</body>
You need to return false from the event handler to prevent the normal form submission after the handler runs:
function changeText() {
document.getElementById('textHeader').innerHTML = 'Changed!';
return false;
}
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.