I'm currently working on a computer telephone integration system which connects phone handsets to a web interface. A call can be made from the SNOM handset using the http command: "http://admin:password@[phone ip address]/command.htm?number=[phonenumber]
". This works correctly, except it opens a new window which redirects to the SNOM index page - I'm trying to stop this redirect but still enable the call to be made.
Instead of entering the URL directly into the browser I have a link which the user can press to start the call:
<a target="popup" onclick="dial()">Dial</a>
The link calls the dial() function which uses window.open() which is passed the corresponding url.
Here are the things I've tried to "hide" or disguise the newly opened tab:
- using window.open() then implementing a timeout of x milliseconds, then closing the tab using .close()
=> the page opened and dialled the number but didn't close - using window.document.open().write() to change the contents of the SNOM index page so it said 'Dialling Number' => This correctly rewrites the page so atleast it disguises the pop up but it changes the url to about:blank and the handset doesn't dial
- using window.blur() or setting the window "left"/"top" parameter to 10000 to move it off the page => this didn't work either, it just moved it into the corner.
- applying iframe to hide the frame => this caused further errors
- I tried numerous AJAX forms/methods and I didn't get very far.
To try and solve this, I visited the following stackoverflow links:
- Make a ping to a url without redirecting
- Hidden window using javascript
- sending an url but staying on the same page ( php, codeigniter, javascript )
In short, I need to be able to call the URL - "http://admin:password@[phone ip address]/command.htm?number=[phonenumber]
" and to either hide the pop-up, close the pop up immediately but still make the call, or rewrite the page so it disguises it.
Here is the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
a {
padding:.5em;
background-color:rgb(55,55,55);
color:white;
text-decoration:none;
font-weight:lighter;
cursor:pointer;
}
</style>
<body>
Call Number
<br>
<input name = 'number' id = 'number' type = 'number'>
<br><br>
<a target="popup" onclick="dial()">Dial</a>
</body>
<script>
function dial() {
var num = $('#number').val();
str1 = 'http://admin:password@[ip address]/command.htm?number=9'
var url = str1.concat(num);
var x = window.open(url,'_blank', 'toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=-20000, top=20000, width=10, height=10, visible=none').blur();
/*
w.document.open().getElementById('body').innerHTML="<body fontFamily = 'Raleway' bgColor='red' text='white'><table><tr><td><img src= 'https://www.sexologistdoctorindelhi.com/images/call.gif' style = 'height:120px;margin-left:-40px;margin-right:-30px;margin-top:-20px;'</td><td><h1 style = 'margin-top: -15px;'> Dialling</h1><p style = 'margin-top:-20px;'> "+num+"</p></td><title>WWS</title></body>";
*/
}
</script>
</html>