as I'm allowed to run a javascript line after the iframe loading
I executed this script
window.onbeforeunload = function(e) {e.preventDefault();}
// it makes the user navigating without issues
I tried this one
window.onbeforeunload = function() {return '';}
// it promot a confirmation message if the use will leave the page or not
any other solutions ?
How about override the links' click event handler?
window.onload = function() {
var links = document.getElementsByTagName("a");
for(var i in links)
links[i].onclick = function() {return false; };
};
I've got a button:
<button type="button" class="btn btn-primary mt15 send-emails" name="SendEmails" value="true">Send Emails</button>
And a method:
$('.send-emails').click(function (e) {
// build data and other stuff
$.post('/leads/sendemails', data, function (data, status, xhr) {
alert('Emails have successfully been queued for sending.');
window.onbeforeunload = null;
window.location.href = '/Leads/Lead/' + #Model.LeadID;
}, 'json');
});
Even with window.onbeforeunload = null; I still get the popup warning:
How can I prevent this?
The solution is following:
$(window).unbind();
This will remove the onbeforeunload event just before redirect the browser to a new page using location.href.
Use a global variable to check before redirecting to the page like this. Have a string variable to hold href which you need to redirect and redirect it before statement
(function($){
var dontSubmit = false,
$form = $('form#my-form');
// Prevent the trigger a false submission on link click
window.addEventListener("beforeunload", function (e) {
dontSubmit = true;
$form.trigger('submit');
});
$form.on('submit', function(event){
if (dontSubmit) {
event.preventDefault();
return;
}
// Continue on as normal
});
})(jQuery);
I have a page that has a header and sidebar with a right content panel that is an Iframe.
In a page loaded into the right content panel, I am trying to have a clicked link update the Browser URL in the parent window to the URL of the new page that is loaded into the Iframe.
I do not want the actual parent window to reload the URL but simply to update the URL in the address bar.
Something like:
window.history.pushState('obj', 'newtitle', '/bookmarks/list/');
Is this possible from an Iframe?
I was able to accomplish updating the parent windows URL in the address bar using history.pushState by sending the new URL to the parent from the child Iframe window using postMessage and on the parent window listening for this event.
WHen the parent receives the child iframes postMessage event, it updates the URL with pushSTate using the URL passed in that message.
Child Iframe
<script>
// Detect if this page is loaded inside an Iframe window
function inIframe() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
// Detect if the CTRL key is pressed to be used when CTRL+Clicking a link
$(document).keydown(function(event){
if(event.which=="17")
cntrlIsPressed = true;
});
$(document).keyup(function(){
cntrlIsPressed = false;
});
var cntrlIsPressed = false;
// check if page is loaded inside an Iframe?
if(inIframe()){
// is the CTRL key pressed?
if(cntrlIsPressed){
// CTRL key is pressed, so link will open in a new tab/window so no need to append the URL of the link
}else{
// click even on links that are clicked without the CTRL key pressed
$('a').on('click', function() {
// is this link local on the same domain as this page is?
if( window.location.hostname === this.hostname ) {
// new URL with ?sidebar=no appended to the URL of local links that are clicked on inside of an iframe
var linkUrl = $(this).attr('href');
var noSidebarUrl = $(this).attr('href')+'?sidebar=no';
// send URL to parent window
parent.window.postMessage('message-for-parent=' +linkUrl , '*');
alert('load URL with no sidebar: '+noSidebarUrl+' and update URL in arent window to: '+linkUrl);
// load Iframe with clicked on URL content
//document.location.href = url;
//return false;
}
});
}
}
</script>
Parent window
<script>
// parent_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function parent_on_message(e) {
// You really should check origin for security reasons
// https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
//if (e.origin.search(/^http[s]?:\/\/.*\.localhost/) != -1
// && !($.browser.msie && $.browser.version <= 7)) {
var returned_pair = e.data.split('=');
if (returned_pair.length != 2){
return;
}
if (returned_pair[0] === 'message-for-parent') {
alert(returned_pair[1]);
window.history.pushState('obj', 'newtitle', returned_pair[1]);
}else{
console.log("Parent received invalid message");
}
//}
}
jQuery(document).ready(function($) {
// Setup XDM listener (except for IE < 8)
if (!($.browser.msie && $.browser.version <= 7)) {
// Connect the parent_on_message(e) handler function to the receive postMessage event
if (window.addEventListener){
window.addEventListener("message", parent_on_message, false);
}else{
window.attachEvent("onmessage", parent_on_message);
}
}
});
</script>
Another solution using Window.postMessage().
Iframe:
/test
/test2
<script>
Array.from(document.querySelectorAll('a')).forEach(el => {
el.addEventListener('click', event => {
event.preventDefault();
window.parent.postMessage(this.href, '*');
});
});
</script>
Main page:
Current URL: <div id="current-url"></div>
<iframe src="iframe-url"></iframe>
<script>
const $currentUrl = document.querySelector('#current-url');
$currentUrl.textContent = location.href;
window.addEventListener('message', event => {
history.pushState(null, null, event.data);
$currentUrl.textContent = event.data;
});
</script>
See demo on JS Fiddle.
how to show only one popup at a time?
i have created one page called parent.html. On parent page, i have two links one is register and another is login.
if i click register then register page open as child window
but
if i click login then already opened child box(register) should close and login child window should open or all previously opened child box should disappear.
my code is as below
<input type="button" value="login" onclick="ShowPopup('login.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
<input type="button" value="register" onclick="ShowPopup('register.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
i replaced "popup" with "self". now only one child window open at a time instead of multi and working perfect.
but when i close child window, parent page is not refreshing.
child window code as below
<form id="form1" runat="server">
<input type="button" value="Refresh Parent" onclick="RefreshParent()" />
<script type="text/javascript">
function RefreshParent() {
if (window.opener != null && !window.opener.closed) {
window.opener.location.reload();
}
}
window.onbeforeunload = RefreshParent;
</script>
</form>
please help me out
First thing , there is no need to define variable & function again .. and now coming to solution as --
<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,
menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
In Your Child Page ,Head Section (To refresh parent window on close)
<script>
window.onunload = refreshParent;
function refreshParent() {
if(window.opener)
window.opener.location.reload(true);
}
</script>
By default, the reload() method reloads the page from the cache, but you can force it to reload the page from the server by passing parameter to true.
-- OR --
You can also some code in parent while you open a child window and look up for its child window if its close refresh itself..
<script type="text/javascript">
var popup;
var lookupTimer=null;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,
statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
lookupTimer = setInterval(function(){ loolUpChild(); }, 1000);
}
function loolUpChild()
{
if((popup.closed))
{
window.location.reload(true);
clearInterval(lookupTimer);
}
}
</script>
create a global variable and maintain your flag if previous popup is open then close first and open new
Like
if(popup){
popup.close();
popup=false;
}
after that open new
window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup = true;
How can we disable browser back button on home page if session is active.Same like Facebook site functionality??
In Javascript
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
Read this document