i want to know how can i popup a window to a particular website when user clicks anywhere on the page.just like popup companies.Am i able to do that in html using javascript & jQuery ?
i would much appreciate any help.
Complete sample on pure JavaScript:
<html>
<head>
<title>Example</title>
</head>
<script type="text/javascript">
var popup = function() {
window.open ("http://example.com", "Window","status=1,toolbar=1");
}
</script>
<body onclick="popup()">
<h1>Click anywhere!</h1>
</body>
</html>
Result:
You can specify some parameters of your popup window:
Width and Height:
window.open ("http://example.com", "Window","status=1,toolbar=1,width=500,height=300,resizable=yes");
Complete reference on developer.mozilla.org
Bind the click to the body and enter the url
$('body').click(function(){
window.open('www.google.co.uk', 'New Window', 'height=200,width=200');
return false;
});
$('body').click(function(){window.open('www.stackoverflow.com')});
You can try this-
<script>
window.onclick = myFunction;
function myFunction() {
window.open('www.google.com', 'Popup Window', 'height=500,width=500');
}
</script>
Related
This doesn't work as to return the focus to the parent window in Firefox 4 and 5
<html>
<head>
<script type="text/javascript">
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>The new window.</p>");
myWindow.blur();
window.focus();
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
How can I return focus to the parent window using javascript?
You need to give your parent window a name.
Parent.html
<a id="link" href="#">Click to child.html </a>
<script type="text/javascript">
$(document).ready(function () {
window.name = "parent";
$('#link').click(function (event){
event.preventDefault();
window.open("child.html");
});
});
</script>
Child.html
<a id="link" href="#">Return to Parent </a>
<script type="text/javascript">
$(document).ready(function () {
$('#link').click(function(event) {
event.preventDefault();
var goBack = window.open('', 'parent');
goBack.focus();
});
});
</script>
Now, whenever you click the link in child.html, the parent window will be focused.
Sorry for necromancing a very old question, but I ran into the same problem and couldn't find any solution. I eventually solved this by using the following script:
e = window;
while (e.frameElement !== null) {e = e.parent;}
e.parent.focus();
Apparently, calling just window.focus(); isn't enough. You have to call the Window's parent's focus method by using window.parent.focus(); You can't access any other properties from JS from it though, it will give a cross-source error. This script will also work if your script was fired from a frame within a page, assuming the frame and main page share the same source (domain).
I don't think you can return focus, not without closing the child window:
myWindow.close()
I tried to use the above example and it didn't work for me. I had to use a recursive loop to find the opener until the window didn't have an opener (bad design, I know, but our app has several levels of child windows). Here is the code example. I hope it helps:
/* This is for the button functionality.
The button element first comes in.
This element is then used to get the document that has the element.
The document window opener is then passed to the focusMain method */
function setFocusOnMain(el){
var doc = el.ownerDocument;
var win = doc.defaultView || doc.parentWindow;
focusMain(win.opener.document);
}
/* This is a recursive method that checks for a parent window of the current document.
If the document has no window opener, focus on this element because this is the Main.
If the document has a window opener, pass the window opener's document to focusMain. */
function focusMain(doc) {
var win = doc.defaultView || doc.parentWindow;
if (win.opener == null) {
doc.focus();
} else {
focusMain(win.opener.document);
}
}
Here is how I solved this.
const ParentWindowName = 'ParentWindowName';
// here set the parent window name so that you can switch back to it later and open the new window/tab
export const openChildWindow = (id) => {
window.name = ParentWindowName;
window.ChildWindowName = window.open('/child', id);
};
// here you can change the focus back to the new window.
export const focusParentWindow = () => {
window.open('', ParentWindowName).focus();
};
If this is a Window you opened yourself you can use opener.focus();
I have the following html.
when I click on the link in IE it dumps the return value on an empty page.
in chrome it simply runs the function without touching the page.
Can something be done to make IE behave like chrome in this respect?
<html>
<body>
<script type="text/javascript">
function foo(){
return true;
}
</script>
<a title="call foo" href="javascript:foo()">return true</a>
</body>
</html>
The point of a javascript: scheme URL is that it runs some code, which generates some data, which the browser then navigates to.
If you just want to run some JS when something is clicked: Don't use a link.
Use the right tool for the job.
function foo(){
return true;
}
document.querySelector("button").addEventListener("click", foo);
<button title="call foo">return true</a>
<html>
<body>
<script type="text/javascript">
function foo(){
event.preventDefault();
return true;
}
</script>
<a title="call foo" href="javascript:foo()">return true</a>
</body>
</html>
You could use the event.preventDefault() method to prevent hyperlink default event in the click event. Like this:
<script type="text/javascript">
function foo(e) {
event.preventDefault();
////get the href attribute.
//var href = document.getElementById("btn").getAttribute("href");
////display the page. You could also using "window.open(href)" to open a new tab to display the page.
//window.location = href;
return true;
}
</script>
<a title="call foo" id="btn" href="https://www.google.com/" onclick="foo(this);">return true</a>
I have a link in www.abc.com , clicking on which it opens up a popup from www.def.com .
There is a form in that popup from www.def.com. After clicking upon the "Save" button on the form I want the current window to be closed
and the parent will should redirect to a location.
Before this change when I was showing the form from www.abc.com, the below code was working fine .
<script language="JavaScript">
parent.window.close();
parent.opener.parent.window[1].location.replace('/abc.jsp?custid=12345');
</script>
But now "parent.opener" is returning null. So I am able to close the popup but not able to redirect the parent window to
disired location.
I know what I am asking is bit wired, But this the requirement.
At "abc.moc"
<!DOCTYPE html>
<html>
<head>
<script>
// open `popup`
var popup = window.open("popup.html", "popup", "width=200,height=200");
// handler `message` event from `popup.html`
function receiveMessage(event) {
console.log(event, event.data);
this.location.href = event.data;
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
</body>
</html>
at "def.moc"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Save">
</form>
<script>
console.log(window.opener);
var button = document.querySelector("form input[type=button]");
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
// do stuff with `form`
// call `.postMessage()` on `window.opener` with
// first parameter URL to redirect `abc.moc`,
// second parameter `location.href` of `abc.moc`
window.opener.postMessage("redirect.html",
window.opener.location.href);
// close `popup`
window.close();
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/pK4XBJDrqFrE7awvMlZj?p=preview
This is my html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Popup</title>
<body>
Please fill out my form.
</body>
</html>
May i know, how to display this contact us form as pop up and also click outside it should closed.
What my mistake in this code. can you help me?
In order to satisfy the "click outside it should be closed" requirement, you will need some JS to keep track of when the window is opened and closed. When you open the window from the parent page, it will open a popup, and if you click on the parent page again, while the window is still open, the popup will close.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
...
Please fill out my form.
Working demo: http://jsfiddle.net/spryno724/b857X/2/
I have the following code.
<!DOCTYPE html>
<html>
<head>
<title>Focus issue</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var text = document.getElementById('text')
window.onload = function() {
text.focus()
}
window.onhashchange = function() {
text.focus()
}
}//]]>
</script>
</head>
<body>
<textarea id="text"></textarea>
<p>Click to focus</p>
</body>
</html>
Here is a JSFiddle demo of the above code: http://jsfiddle.net/DvU63/
Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?
Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.
You're doing the .focus() statement from inside an onload handler that is itself defined inside an onload handler. This inner onload will not be called because by the time you define it the onload event will have occurred. Try this:
window.onload=function(){
var text = document.getElementById('text')
text.focus()
window.onhashchange = function() {
text.focus()
}
}
Your demo, updated: http://jsfiddle.net/DvU63/2/
do this
<script type='text/javascript'>
window.onload=function(){
var text = document.getElementById('text')
text.focus();
window.onhashchange = function() {
text.focus();
}
}
</script>
fiddle