I have a web page where people can go and design things, let's say furniture layout. There are buttons on the page to save the work, but I don't have any protection if someone just goes up and puts a new URL in the Address bar. Then the browser (say Chrome 34.0) throws out all the current work and loads the new page. How can I force Chrome to open the new URL in a new tab, or at least catch the exit from the current page so I can save the work for the user?
Thanks
You can create a javascript popup that runs when the user has modifyed the work with this line:
window.onbeforeunload = function(){ return 'All unsaved Work will be lost.' }
The popup will look something like this
Confirm Navigation
All unsaved Work will be lost.
Press OK to continue, or Cancel to stay on the current page.
Use this line to prevent the popup once the user saves:
window.onbeforeunload = null;
Related
hi im using laravel 8 and my software is pos ..
everything working so good but i have big problem ..
thats sometimes the cashier can refresh the page when the customer is gone without save the invoice
..
so what i did is this ..
document.addEventListener('keydown', (e) => {
e = e || window.event;
if(e.keyCode == 116)
{
var is_admin = $("#is_admin").val();
if(is_admin != 1)
{
e.preventDefault();
// this code here will not allow f5 to work
}
}
});
but the cashiers goes to the address bar and hit enter and like that he refresh the page
also sometimes they hit the refresh button beside url bar
so i start chrome in kisok mode in full screen
but the problem thats he can move the mouse to the top of the browser and the url bar will show again and he can do refresh page ..
so the solution for my problem is there any way to set password in chrome when refresh the page or close the chrome or is there any way to start chrome without close bar and url bar in kisok mode
thanks ..
Based on my research I didn't find anything related to setting a password in chrome for closing, instead, I have other solutions that may help you by considering this closing/refreshing issue happens accidentally.
#1st Solution - Closure Extension
https://chrome.google.com/webstore/detail/closure/jjagagcgljmlnihcilbpbfcglnopepjb
a very simple extension that works by locking the current browser tab. Click the toolbar icon or right-click on a page and select “Confirm Closure”. The favicon for the website in the current tab will turn into a padlock.
if the cashier clicked on the refresh button or the closing button a confirmation popup will show up.
#2nd Solution - Disable Close Button
checkout these 5 software that claims to prevent accidental closing of software by disabling the close button
https://www.raymond.cc/blog/prevent-program-closing-disabling-close-button/
#3rd Solution - Saving Draft.
The last solution I have is a workaround you can make by using
window.addEventListener('beforeunload', function (e) {
// saving current invoice in localstorage to be retrieved later
});
// check this answer
// https://stackoverflow.com/questions/13443503/run-javascript-code-on-window-close-or-page-refresh
beforeunload event, so you can save a draft of the current invoice in locale storage before closing the window, but you are should be very aware of how to manage these drafts, when to retrieve them, and when to clean them.
Also, you can use service workers if you choose this kind of solution.
Again, this all about if the cashier accidentally makes this behavior, which I think he must be aware of what he is doing, so you are making your validations as you can to prevent such behavior and make your system as robust as possible, I encourage you to think of this problem in a technical way then you should take the 3rd solution, and for the client just offer him the other 2 solutions which I see they will work well, otherwise, if the client wants to make something wrong in purpose then it will be his responsibility.
I'm working in an application that requires these types of login where a new window (no tab) pops up and ask you to login, in the same way that twitter or facebook do (or used to do), where it shows where to put your email and password, click "login" and then the window would close and the main window would receive the authentication and keep going.
I can do it in "headed" mode, when I click the authentication button, the window pops up and I get a grip of it with
const newWindow = (await browser.pages())[1]
and then I'd navigate like normal where in my case I only have to click a single button because I'm already logged in the page I'm trying to use for authentication
await newWindow.waitFor("//SomeXpath")
const buttonToClick= (await newWindow.$x("//SomeXpath"))[0]
await buttonToClick.click()
Again, in headed mode it works fine. but in headless mode is like this 2nd page would not open.
If I try:
console.log(await browser.pages())
I only see the main page where I open puppeteer
I've seen people talking about the "target" class, but it seems is for new tabs, and the examples I've found didn't work for me (or probably I wasn't able to understand and properly use them)
I'm afraid that what I'm trying to do is not possible and I'm chasing a ghost.
Thanks
Edited:
A snapshot of the window with the button I have to click
Snapshot of the new window
Also I've tried this, but it didn't work either:
const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page())));
const popup = await newPagePromise;
where popUp would be the new "page". But if I do a console.log(popup) it returns "null"
the following is on a page, when i click it - I DO NOT want the page to refresh, but only the new window which this link opens - i want to refresh that newly opened page, not the main window.
clicking the link opens the new window correctly, but refreshes the main window also (where the link lies). that is undesirable and i want to know how to stop it from doing so.
clik to open new window
clik to open new window
pl advice.
as advised below, but not working: infact it is breaking the new window, new window appears as blank window!
clik to open new window
Here's the proper way to open a link in a new window. If javascript isn't available, the link will still work.
Click Me
mywin is a window name, not a variable.
You need to store the returned wobject from window.open() in a global variable:
onclick="window.mywin = window.open('URL','mywin');">
The problem with the main window reloading is likely the href="" line. This could be causing the browser to navigate to the same page where it is presently (and therefore refreshing). You should add return false; to the js, and likely also adopt a more standard link target like href="#" which will navigate to the top of the same page without a refresh (though this will still get cancelled by the false return).
friends, it is resolved by doing this:
clik to open new window
I have implemented a chrome extension. Was wondering if the popup.html can be opened in a new tab? Every single click on the page, and the popup disappears :( .. Was wondering if I can stick it to the page or is there a way to open the extension in a new page?
Yes, a popup page is just a normal extension page, you can do the following to open a new popup tab from the background page. I use that every time when the user first installs the extension, I open the about page, you can do the same for the popup page.
chrome.tabs.create({url: 'popup.html'})
For one of my extensions, My Hangouts, I have a small "open as tab" button within the popup, I bind the click event for that link to execute this:
chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
The reason why I passed the hash is because I wanted to add more content when the user opens it in a popup because there is more real estate to play with.
Within the popup, I use normal JavaScript to differentiate whether I opened the tab in the new tab page or in a normal page like the following:
if (window.location.hash == '#window') {
this.displayAsTab = true;
}
You can do tricks like this to make your extensions user experience better.
here is the same issue: Chrome Extension: onclick extension icon, open popup.html in new tab
use:
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
// Tab opened.
});
property "pinned" to stick the tab.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.