Change HTML attribute after using window.open - javascript

Basically I want to open a new window on click of a button. Once the new window is open I want to change the zoom level to 80%.
After I open the window I take a reference object of the window and try to set the zoom level.
This is a sample code:
function openGoogle(){
var obj = window.open("https://www.w3schools.com");
obj.document.body.style.zoom = 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button onclick="openGoogle()">Open</button>
</body>
</html>
But this doesn't work

This is not allowed by browsers to prevent XSS (cross site scripting).
You can start understanding XSS more here: https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)
What you can do, on the other hand, is pass Window Features into window.open() to specify height and width as well as some other flags. (NOTE: I do not have experience with this feature, I'm not fully aware of what it is and isn't capable of)
Window Features Documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features

Related

How to change the window status with mouseover and mouseout?

I want to change the text of the status window when the mouse is over a link. My link's name is: Hipervinculo.
Then, when the mouse is out of the link it should appear a different text.
This is my html until now, but it doesn't work.
Can someone explain me how to do it?
Thank you so much!
<html>
<head>
<meta charset="UTF-8">
<title>Práctica 4</title>
<script type="text/javascript">
function info(txt){
window.status="txt";
}
function info2(txt){
window.status= "txt"
}
</script>
</head>
<body>
Hipervínculo
</body>
</html>
window.status has been disabled in most (if not all) browsers for security reasons (it was possible to fake a different location for links that way).

Cannot open a separate window as an underlying tab in HTML

I am trying to open a separate window (as an underlying window) of the current window. I have attached a simple code segment which I used. But in Chrome there is a popup blocked message appeared when I do this. It means that The separate window is not recognized as a window, it still considered as a popup. How can I do this ? Any suggestions would be really appreciated
<html>
<head>
<title>JS Window example</title>
</head>
<script type="text/javascript">
function windowonload()
{
window.open("http://yahoo.com", "sameera", "height=200,width=200");
}
</script>
<body onload="javascript: windowonload()">
<h1>JS Window example</h1>
</body>
</html>
you can use iframe tag like this wherever you want to show the window
<iframe src="http://yahoo.com"></iframe>

The Bounce on Mouse Hover and Pop Up when we Try to Close the Window

I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

IE11-facing issue while calling focus() on window object

Trying to run a following simple code on IE11 browser:
<!DOCTYPE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
window.thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>
ISSUE:On IE11 it gives the error statement "Unable to get property 'focus' of undefined or null reference"
This answer's late, but I thought that I'd post it just in case somebody came across this question in the future.
According to the answer here: https://stackoverflow.com/a/7025648/1600090,
and my own experience, one possible cause could be that you're trying to open a window in a different internet zone for which Protected Mode is enabled. By default, IE11 enables Protected Mode for the Internet and Restricted zones but disables it for Local Intranet and Trusted Sites. So, for example, if your page (and/or site) are running in your Local Intranet zone and you're trying to open a new window in the Internet zone, window.open is going to return a null reference. If the page/site which is launching the new window is in the Internet zone, in my experience, window.open will return a reference. So, #ssut's example in jsfiddle is going to work because jsfiddle.com and google.com are probably both in the same zone (I'm assuming the Internet zone).
Please check the variable scope. This issue is not browser's problem.
In your code, var thewin = window.open(.. in the ButtonClick2 function, but window.thewin.focus(); is point to window object's thewin variable.
Change the code to thewin.focus(); then it works perfectly.
New code:
PE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>

Popup window in Javascript

In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.

Categories