Close parent window on iframe button click - javascript

I have an iframe without ID (generated by third party). The iframe is embedded on a landing page. When the submit button on the iframe gets clicked, I would like the window or landing page to be closed because when the submit button is clicked, it will open a new tab.
function() {
var iframe = document.getElementByTagName('iframe');
var sbutton = document.getElementById("form_002b_ao_submit_href");
iframe.sbutton.onclick = function() {
window.unload();
}
};
but it does not get triggered.

$('iframe').contents().find('body button').click(function (event) {
event.preventDefault();
$('iframe').remove();
});

If you are wanting to close the main window after the submit button is clicked then you can do something like the following.
Live Preview
Link to the test page that is loaded in the iframe
HTML
<iframe src="http://s.codepen.io/larryjoelane/debug/dMoqPL"></iframe>
JavaScript
//select the iframe element without an id
var submitButton = $("iframe").contents().find("#submit_button");
submitButton.on("click", function(event) {
//if you need to prevent default actions(form submit for example)
event.preventDefault();
//close the window
window.close();
//debugging only
//alert("iframe submit button click event fired");
});

Related

JavaScript Action Button

I have this code. What it does is that when I click the Save button user gets registered. I want to automate this button. I want to auto click this button. So when the page loads. Users don't have to click the save button. User get register automatically. I have already hardcoded the user information.
var buttons = [];
buttons.push({
text: lang.save,
action: function(){
You could do something like this :
When DOM (html page) is loaded, click the button.
// As soon as the page is loaded, auto save.
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM loaded');
const saveButton = document.getElementById("button-id");
saveButton.click();
});

HTML button click opening 2 links in new tab

I have these buttons on frontend and only one is visible at a time. .btn-active hides the button.
Buy Now
Buy Now
on button click, I wanted to open the package link by concatenating package id in href in jquery.
jQuery('#starter-monthly').on('click', function(e) {
var href = jQuery(this).attr('href');
window.open(href + '?package='+24);
});
jQuery('#starter-yearly').on('click', function(e) {
var href = jQuery(this).attr('href');
window.open(href + '?package='+27);
});
but when I click the button, it opens 2 links in 2 separate tabs which are https://example.com/shop?packag=24 and https://example.com/shop/
I wanted to open only one link which is https://example.com/shop?packag=24
What I am doing wrong? Any solution?
Clicking on an anchor element (a tag) instructs the browser to open the link. Having target attribute further tells the browser to open it in a new window/tab. Now your code captures the click event and explicitly opens a new window (with proper url). However, that doesn't prevent the browser from carrying out the original action intended for all 'anchor' tags.
Basically you see two tabs opening, because one is opened by your code, and the other one by browser because of the click on anchor tag. You can suppress the default browser behaviour by calling preventDefault on the event object passed to your handler. Your code should be something like this:
jQuery('#starter-monthly').on('click', function(e) {
e.preventDefault();
var href = jQuery(this).attr('href');
window.open(href + '?package='+24);
});
jQuery('#starter-yearly').on('click', function(e) {
e.preventDefault();
var href = jQuery(this).attr('href');
window.open(href + '?package='+27);
});

Calling a function inside Jquery on click works first time on page load and afterwards does not

I am trying to popup a modal on the click of a button, the modal plugin is called iziModal. I am doing this inside of a WordPress page, after the page loads it works on the first try but when I close the modal and click the button again the modal does not pop out but the alert function works
Here is my code below
jQuery(document).on('click', '.modal-btn', function (event) {
event.preventDefault();
alert("Am here");
$mentorId = jQuery(this).attr('data-id');
jQuery('input[name="mentorId"]').val($mentorId);
jQuery("#modal-popup").iziModal('open');
});
jQuery(document).on('closing', '#modal-popup', function (e) {
jQuery('#modal-popup').hide();
jQuery('.iziModal-overlay').hide();
});
try this code
jQuery(document).on('closing', '#modal-popup', function (e) {
$('#modal-popup').iziModal('close');
});

Jquery .click hide function for closing window

I prepared fragment of my page to show you my problem:
a link
On the bottom is show small red window named div "pomocnik"
In Chrome browser click on the "close" icon do it works, but IE does the work prepared for clicking in the text inside DIV
onclick="document.location.href('http://www.google.com')
so it open new page.
IE has detected onclick for DIV but Chrome detected more in detail for image.
My idea is to close window after clicking on close button.
$('#close').click(function() {
//var g = document.getElementById("pomocnik");
//g.style.display = 'none';
$('#pomocnik').hide(2000);
$('#konsul').click = null;
});
I think that the problem is that the event (click onto close image) first calls the event handler which hides your div, but then bubbles up to the containing div and starts the default action for it (open the link). Try the following:
$('#close').click(function(e) {
//var g= document.getElementById("pomocnik");
//g.style.display= 'none';
e.stopPropagation(); //this will prevent the event from bubbling up to the containing div
$('#pomocnik').hide(2000);
//$('#konsul').click=null;
});

Window closing even on clicking 'cancel' button in confirmation box

In my website i conduct an exam in new window & i want that if a user closes this window, he will be redirected to other page if he presses 'ok' on confirmation. But he should stay there if presses 'cancel'. The javascript i'm using is below.
/**
* This javascript file checks for the brower/browser tab action.
* It is based on the file menstioned by Daniel Melo.
* Refer: http://stackoverflow.com/questions/1921941/close-kill-the-session-when-the-browser-or-tab-is-closed
*/
var validNavigation = false;
function endSession() {
$choice = confirm("You will exit your CSA test. Are you sure you want to close the window?");
if ($choice)
window.open('Result.aspx', '_blank', 'toolbar=0, scrollbars=1');
}
function wireUpEvents() {
window.onbeforeunload = function () {
if (!validNavigation) {
endSession();
}
}
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function (e) {
if (e.keyCode == 116) {
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
$(document).ready(function () {
wireUpEvents();
});
Here on clicking 'ok' button the 'Result.aspx' window opens successfully, but the problem here is that if user clicks 'cancel' in the confirmation box then also the window is getting closed.
Please tell me where am i going wrong or any alternative to this.
Any kind of any help will be appreciated.
Thanks in advance!!
You can't actually stop the user from leaving your page. The final dialog (controlled by the browser), that asks if they want to stay on this page or leave, is up to them.
Your use of confirm() simply provides a dialog for the user, which you can get the choice from, but has no effect on the page being left. If you return a value from window.onbeforeunload, it prompts the user with that final dialog I mentioned, but you cannot capture their choice, nor can you control it.
There's nothing you can do to actually stop a user from leaving your page.

Categories