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>
Related
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
window.opener doesn't work in Chrome. Ok for IE. Do you know why ?
Is it a problme of cross-document interactions ? I don't know why, files are in the same folder on my local computer.
I want the child window could access to the datas (DOM for exemple) of the parent window and modify them.
This is a example :
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<input type="text" id="data" value="1234567" />
Open Child Popup window
<script>
function openChildWindow() {
window.open('child.html','childWindow','width=400,height=400');
}
</script>
</body>
And for the cild window child.html :
<html>
<head>
<title>Child Window</title>
<script>
function initializeMainDiv() {
document.getElementById("mainDiv").innerHTML = "Parent window data field value is: " +
window.opener.document.getElementById("data").value
}
</script>
</head>
<body onload="initializeMainDiv();">
<div id="mainDiv"></div>
</body>
</html>
It doesn't work on my chrome. I don't understand why, the code is simple.
I try with parent.window.openener, but the result is the same.
I am a beginner building a Chrome extension. I have an issue using the function described in the Chrome extension developer doc to make a button to create a new tab in "popup.html". It doesn't work no matter which methods I have tried from Stack Overflow.
My code is as follows:
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
function showIndex(){
var index_url="/index.html",
chrome.tabs.create({
url: index_url
}),
}
</script>
<body>
<button value="tab" style="width:100px; height:100px;" onclick="showIndex();">Go to Index</button>
</body>
or
function createTab() {
chrome.tabs.create({url: "/index.html"});
}
Go to Index
Neither option seems to work.
So I wonder whether this function should be placed in background.js? If not, please tell me what's wrong with this code. Thanks in advance!
BTW I changed the URL to www.stackoverflow.com. It is still the same---not working.
It looks like you spelled create wrong in your HTML.
Your issue is probably that Chrome does not allow you to use "unsafe" code in extensions. See the documentation here. You cannot have javascript in your html. You have to subscribe to the event handler on the DOM element.
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<body>
<button id="index" value="tab" style="width:100px; height:100px;">Go to Index</button>
<script type="text/javascript" src="indexStuff.js"></script>
</body>
</html>
You then need a new indexStuff.js file with this
function showIndex() {
var index_url = "/index.html";
chrome.tabs.create({
url: index_url
});
}
document.getElementById('index').addEventListener("click", showIndex);
Note, the script tag could be moved to the top if you add an event handler to check when the DOM is loaded.
function showIndex(){
var index_url="/index.html",//why are you using "," instead of ";"?
chrome.tabs.create({
url: index_url
}), //why are you using "," instead of ";"?
}
why are you using "," at the end of line, instead of ";"?
You can use window.open(url, title, options) to open a popup window via JavaScript.
options is a string containing one or more of these variables (or empty):
width width of the window
height height of the window
location URL visible or not
status statusbar visible or not
menubar menubar visible or not
directories I'm guessing this is the bookmark bar
toolbar toolbar (back, home, etc.) visible or not
resizable whether or not resizable
scrollbars whether or not to enable scrollbars
e.g.:
window.open('http://website.com/popup.html', 'Popup Window', 'width=640,height=480,location=yes,scrollbars=yes');
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.
Why is it so that when you use window.parent.showMessage("Video Is OK"); inside a .js file you've included on a page, it won't work, but only if it's on the page itself..?
Can you fix this?
There are two scenarios that I can think of where you'd want to use window.parent. The first is when you have a window open another window using window.open. The other is where the first window uses an iframe to load a page. In the former case, it appears as though you actually want to use window.opener, as ukostin has said. In the latter case, window.parent works fine. Both methods work properly whether the code is inline or loaded from an external JS file. Here are some tests:
POPUP
parentWindow.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
<body>
Open
</body>
</html>
externalWindow.js:
function showMsgExternal(msg){window.opener.showMsg(msg);}
childWindow.htm:
<html>
<head>
<script>function showMsgInline(msg){window.opener.showMsg(msg);}</script>
<script src="externalWindow.js"></script>
</head>
<body>
Inline
External
</body>
</html>
IFRAME
parentFrame.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
</head>
<body>
<iframe src="childFrame.htm" width="300" height="100"></iframe>
</body>
</html>
externalFrame.js:
function showMsgExternal(msg){window.parent.showMsg(msg);}
childFrame.htm:
<html>
<head>
<script>function showMsgInline(msg){window.parent.showMsg(msg);}</script>
<script src="externalFrame.js"></script>
</head>
<body>
Inline
External
</body>
</html>
Try to use window.opener as link to the parent window.