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
Related
I am trying to do 2 things:
Open a popup when someone clicks on Lease today (Please note I do not have control over the HTML, so Jquery is the only way to change the HREF)
Change the Anchor tag back to "/floor-plans.aspx" after the first click
Somehow the code is not calling the function at all and not sure how to do #2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change HREF Attribute of Anchor Tag </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="http://"]').each(function(){
var oldUrl = $(this).attr("href"); // Get current url
var newUrl = oldUrl.replace("/floor-plans.aspx", "openPopup()"); // Create new url
$(this).attr("href", newUrl); // Set herf value
});
});
function openPopup(){
alert("popupopened");
}
</script>
</head>
<body>
<span>Lease Today</span>
</body>
</html>
There are two parts to this, the first click to do the alert, then the second to NOT do the alert but allow the click (and turn off this handler, first time only we alert)
In addition, I added a class to make the selector much simpler to use/understand.
You did not ask how to tell what was clicked in the function, so I show that as well as how to pass some extra values/objects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change HREF Attribute of Anchor Tag </title>
</head>
<body>
<span>Lease Today</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function openPopup(event,passed) {
console.log(passed.foo.Name);
alert("popupopened was "+$(event.target).text());
}
$(function() {
$('a.replacer-clicker').on('click', function(event) {
// Get prior url if we had it
let prior = $(this).data('prior-href');
if (!prior) {
// do not go there and stop other event handlers from seeing it
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
// save old, no prior click
$(this).data('prior-href', $(this).attr("href"));
// all it with this instead so we know context of it
openPopup.apply(this, [event,{foo:{Name:"fooby"}}]);
// simple
//openPopup();
} else {
console.log(prior);
//second click (had prior)
// now turn this handler off
$(this).off('click');
// now re-trigger the click, pass some arguments
$(this).trigger('click',[{foo:{Name:"fooby"}}]);
}
});
});
</script>
</body>
</html>
Your first issue is hwo you select the anchor and the second one is related on how you use href attribute.
Fixed code:
function openPopup(){
alert("popupopened");
}
$('a[href^="/floor-plans.aspx"]').each(function(){
var oldUrl = $(this).attr("href"); // Get current url
var newUrl = oldUrl.replace("/floor-plans.aspx", "javascript:openPopup();"); // Create new url
$(this).attr("href", newUrl); // Set herf value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
The correct way is:
$('a[href^="/floor-plans.aspx"]').on('click', function(e) {
e.preventDefault();
alert("popupopened");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
Instead, if the html element is not yet ready you can delegate the click event:
$(document).on('click', 'a[href^="/floor-plans.aspx"]', function(e) {
e.preventDefault();
alert("popupopened");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
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>
I have PopUp window which goes to upload.jsp, which upload the file to directory.
The uploading logic is written in upload.jsp. My problem is I wanted get the saved path to parent popup window textfield.
The child window has a property, opener, which refers to the window that opened it. Provided they're both from the same origin, the child can access global variables on the parent like this:
opener.globalVariable
That means it can access the parent window's document as opener.document, and so can use opener.document.getElementById or opener.document.querySelector to get at elements in the parent window.
Example:
Parent page:
<!doctype html>
<html lang="en">
<body>
<input type="text"><input type="button" value="Click me">
<script>
document.querySelector("input[type=text]").value = Math.floor(Math.random() * 10000);
document.querySelector("input[type=button]").addEventListener(
"click",
function() {
var wnd = window.open("popup.html");
},
false
);
</script>
</body>
</html>
Popup page:
<!doctype html>
<html>
<body>
<script>
var field;
if (!opener) {
display("Not opened as a popup");
} else {
field = opener.document.querySelector("input[type=text]");
display("Value is " + field.value);
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
</script>
</body>
</html>
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