Window.open-ing to the same popup, even from multiple tabs - javascript

Here is a simple HTML:
<html>
<body>
<input type="button" value="open popup" onclick="window.open('http:\\www.example.com', 'popupName', 'width=100, height=100');">
</body>
</html>
so when you click on the button, a new popup will be created and no matter how many times you click it, that popup will be refreshed from now on.
Thats right. But if you opened my HTML in 2 tabulators? Then 2 popups will be opened, no matter if their names are the same. How to have actually one popup then?

Related

HTTP Authentication popup doesn't shows up

I'm trying to load a snapshot of a camera and i want the authentication popup to show up when i click the button, but it doesn't work. i'm following this example https://www.httpwatch.com/httpgallery/authentication/
The popup shows up when i go to http://192.168.100.103:8080/snapshot.jpg but it doesn't when i click on the button.
<script type='text/javascript'>
function getit() {setTimeout(function(){ document.getElementById('downloadImg').src = ('http://192.168.100.103:8080/snapshot.jpg?' + Math.random().toString(10));}, 1000);}
</script>
<img id="downloadImg">
<input type="button" class="button1 buttonspace" value="Display Image" id="displayImage" onclick='getit()'>
Even though the code works when i sign in, i would like that the authentication popup shows up when i load the image.
What am i doing wrong?

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)

How to add everwebinar form directly to page instead of opening it in POP UP?

The project on which I am working, is to open the pop up form directly into page. See below:
When you will click on first button a pop up will open:
And there will need again to click on register button to open the webinar registration form:
Here is that form:
I want to open this form on first pop up instead of register button. I got this integration code form EverWebinar:
<link href="//events.genndi.com/assets/css/register_button.css" rel="stylesheet"><div style="margin:auto;width:300px;"><div class="embedded-joinwebinar-button"><button type="button" class="btn btn-default css3button" title="regpopbox_818182175026324685_7b22b2195f"><span>Register now</span></button></div></div><script src="//events.genndi.com/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script><img src="//events.genndi.com/tracker?action=registration-evergreen&webicode=7b22b2195f&version=&memberid=818182175026324685" style="visibility:hidden; height:0px; width:0px; border:none;">
I want to open the webinar form directly on first pop up instead of register button there. Is there any possible way to do it?

How do I make multiple tabs open in a new window?

I use this script to create a button which opens the 3 links in new tabs, but in the same window
<html><head>
<script type="text/javascript">
function open_win()
{
window.open("https://google.com/")
window.open("https://www.gmail.com/")
window.open("https://www.facebook.com/")
}
</script></head>
<body>
<form> <input type=button value="Start a Blog" onclick="open_win()"> </form>
</body> </html>
I found another code to open a link in new window of 300*250.
<a href="https://google.com/" onclick= "window.open('https://google.com/','newwindow','width=300,height=250');
return false;"> </a>
Now , I want to combine these two. I want a button as in the first case, to open a new window of 300*250 and then open the three links in new tabs in that window.

You can't. window.open can create two different kinds of windows, depending on whether certain options are specified in the third argument:
Normal browsing windows (which most modern browsers will open in tabs of the current window)
Popup windows (which cannot contain tabs)
There is no way to "mix and match" these two options.

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

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

Categories