Open an URL and click a button on the newly loaded page - javascript

I am just starting to learn Javascript and I want to write a script that redirects to another URL, and after the URL has been loaded , it click on a "Next button and so on.
I am using the following script, which it is executed after a button press in the first html page:
function GoToURLAndClickNext() {
var w = window.open("file:///C:/test_click.html");
w.document.getElementById('button id').click();
}
test_click.html
looks like this:
<!DOCTYPE html>
<html>
<body>
<h1>Test button</h1>
<p>Test </p>
<button type="button" id="button id" onclick="alert('click event occured')">Click here</button>
</body>
</html>
Unfortunately the script does not work... It opens correctly the "test_click.html" document, but it does not automatically click on the "button id".
Is it possible to implement such behaviour? Ideally I would like to navigate over mutliple html pages in a tree-fashion way.
Thanks
z

Related

HTML JS Open new window with console in google chrome

This is client-side HTML. I'm just using HTML for automation.
My initial goal was to open a new window https://live.ipms247.com/login/ and then paste the values in the three login fields. All three fields have ID tags. And I can write to them from the console. For example.
document.getElementById("username").value="sample";
document.getElementById("hotelcode").value="12345";
document.getElementById("password").value="Password";
I wrote a code to copy text from parent window to child window at the click of a button.
My code is on a local file.
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('https://live.ipms247.com/login/','popupWin','');
}
function transferText()
{
popupText = popupWin.document.getElementById("username");
parentText = document.getElementById("parentTextBox");
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox" onkeyup="transferText();" value="Hello World">
<input type="button" onclick="init();" value="popup window">
<input type="button" onclick="transferText();" value="Transfer Text">
</body>
</html>
However, this does not work, apparently because my code is on a local file and the website is on another domain.
So my only solution to this problem, so far, is to launch the site with onlick and then focus to it. Press Ctrl+Shift+J to open the console and then paste the commands (I have code which copies them to clipboard) and hit enter.
Is there any possibility to launch the new window with the console open and focus on the console?
You can not do this because JavaScript restricts you to the user.
If you want to reach your goal, you can use the frames API

How to open multiple url-web-links via custom local .html?

Once upon a time I encountered a simple but efficent script that allows to paste copied links (line by line) into a box and then after pressing a button it opened all of the links (http://etc.etc) in a new tab.
Unfortunately I have deleted this gem.
Can you help me to make a simple local .html page where user could paste list of urls:
http://url.one
http://url.two
and after pressing a button it will open them url-s in a browser
thats what im looking for:
https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2014/07/urlopener.jpg
closest call is this;
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.java2s.com/")
window.open("http://www.java2s.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
instead of predefined URL-s user should be able to paste own links in form of list
To open a new tab, you would use the javascript command window.open(url,'_blank');, where the URL is a reference to the URL you'd like to open. Here's a refrence for window.open.
For your specific usecase, you'd want to create a HTML document with something like a <textarea> in it, and a submit button. You'd then take the text, split it into an array along newlines, (using String.split), then loop over the result and call the window.open function on each entry.
I hoped this helped!
Here is how to do it
document.getElementById("submit").addEventListener("click", function(){
var urls = document.getElementById("url").value.split(" ");
console.clear();
urls.forEach(function(element){
console.log(element)
window.open(element,'_blank');
});
});
<p>Insert your URl seperated by space </p>
<input type="text" id="url" value="https://www.google.se http://www.icefilms.info/" />
<input type="button" id="submit" value="open" />

Upload dialog disappears, immediately after it appears, on web page, that I am creating

I am trying to use elninotech/uppload, as it looks like it will do what I want (give me a portable, easy to use, powerful file upload button). However when I click on the button, the upload dialog appears and disappears (press pause, in debugger, before pressing button, then single step. On 2nd step dialog appears, on 3rd step it disappears).
What am I doing wrong?
<html>
<body>
<form class="profile">
<button id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["form.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image"
});
</script>
</html>
I found a very complex example on their website https://elninotech.github.io/uppload/ I spent some time debugging, and looking at their code. This is what I found.
An element may have the attribute data-uppload-button to mark it as an uppload button. I don't know how that can work with more than one button.
A default button in form dose not work (it causes the problem described in the question). Changing the button to a span works (but is un-intuitive to user). Changing the form to a div, works. Changing the button type to button works.
From the git-hub issue tracker https://github.com/elninotech/uppload/issues/21#issuecomment-445997614
When you have an HTML form element without a method, it defaults to GET. If it has a button inside it, the form assumes it's a submit button, and therefore refreshes the page on pressing it. This means that if you have button without a type="button", the page is refreshed. This means the original state is reverted and you don't see Uppload open up. That's why you need a type="button" on buttons you don't want to submit the page. Alternately, you can have a event.preventDefault() and return false on the onSubmit event on the form too.
Here is the working code:
<html>
<body>
<form class="profile">
<button type="button" id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["div.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image",
services: ["upload", "camera", "link"],
crop: {
startSize: [100,100, "%"]
}
});
</script>
</html>
I have not yet tested with a working endpoint (server)

Use onclick method in HTML?

I am making a website in which the login page has a button that is not setup as a button and it needs to call a function. I add the:
onclick="signin()"
to the code on line 216. (see code here: http://pastebin.com/Uq2nfWTQ)
I have tried adding the function below the div's and on a main.js file. Neither are working. Where should I put the function so that the button actually works? Also, the function is a redirect to a different page, so would I do that with:
window.location = "PUT LOCATION HERE"
This is the bare minimum of what you're describing:
<html>
<head>
<script>
function signin() {
console.log("Hello, I work!");
}
</script>
</head>
<body>
<form action="javascript:void(0);" method="get">
<input type="submit" value="Sign In" onclick="signin()">
</form>
</body>
</html>
Comparing that to your paste bin, you don't have a signin function anywhere.
Thus is an example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to go to signin page.</p>
<button onclick="signin()">Try it</button>
<p id="demo"></p>
<script>
function signin() {
location.href = 'signin.php';
}
</script>
</body>
</html>
Some people have JavaScript disabled or hampered for various reasons; making a web page that requires JavaScript just to go to another page is super irritating for those people! (I am one of them.)
Plus, JavaScript-based navigation is never as useful as regular links. You can middle-click normal links to open them in a new tab, for example, and I do this all the time; it breaks on JavaScript-powered "fake" links, because the page's code can't run in the new tab. In general, using JavaScript to emulate an existing browser feature is a poor idea.
So if navigation is all you're doing, just make a regular link with an <a> and style it with CSS to look like a button. A good (albeit ugly) start:
a#signin-button {
display: inline-block;
background: lightgray;
border: 1px outset gray;
text-decoration: none;
}
OR, make it a plain submit button. (Not recommended as much, since you can't do as much with a submit button — e.g., middle-click to open in a new tab doesn't work.)
<form action="signin.html" method="GET">
<input type="submit" value="Sign In">
</form>

making a div tag dynamic

I am working on a module of the project and I seemed to have stuck up. Tell me explain me what I am trying to do.
I have a text box where the user of my web portal will post the facebook like box code, either a fbml code or xfml code.As soon as the user clicks the submit buttton he should be able to see that like box on my site.
But whats happening right now with me is that I am not able to see the like box .
I have put upon the code below,
<!DOCTYPE HTML>
<head>
</title> Facebook like widget </title>
<script type="text/javascript"/>
function display_fb()
{
var fburl= document.getElementById('fb_link').value;
document.write(fburl);
}
</script>
</head>
<body>
<h1>IF YOU HAVE ANY FACEBOOK FAN PASTE THE LINK HERE!!!</h1>
<label> Paste the link here<input type="text" id="fb_link"/> </label>
<input type="button" value="submit" onClick="display_fb();" />
<div id="userFBLink" >
<label>Wanted is here:</label>
</div>
</body>
</html>
I guess need to refresh the div tag once the user puts his facebook like box code.
I believe I didn't understand you wrong and you want to add the text of this input into that div as a label (I'll suggest you to use "span" instead, because "label" is for labeling form fields).
It seems that you are looking for that:
function display_fb()
{
var fburl= document.getElementById("fb_link").value;
var lblLink = document.createElement("span");
lblLink.appendChild(document.createTextNode(fbUrl));
document.getElementById("userFBLink").appendChild(lblLink);
}
Or with jQuery:
function display_fb()
{
var lblLink = $("<span></span>");
lblLink.append($("input#fb_link").val());
$("div#userFBLink").append(lblLink);
}
It's up to you!

Categories