Archive d’étiquettes pour : Browser



There are numerous different ways of disabling the back button or at least messing with the working of the back button so that the browsers cannot go to the previous page. However, fully disabling the browser’s back button is not a good option, plus client-side applications don’t have that many privileges or rights to do so due to security reasons.

In this article, we will implement a simple logic through JavaScript, which stops the browsers from going to the previous page using the window object.

The window.history.forward() Method

In this article, we will stop the habitual working of the back button of the web browser by using the window Object. And to be precise, we will head inside the window object’s history and move it “forward” when the browser tries to revisit the previous page.

Demonstration of Window.history.forward() Method

To start, we need two different HTML pages. The first page is called the home.html, and it contains the following lines:

<center>
      <a href=«secondPage.html»>Click me to visit the next page</a>
</center>

As you can see, we are simply creating an <a> in which we are simply referring to the secondPage.html.

After that, simply create the second HTML with the exact name secondPage.html. And in this HTML document, you want to add the following lines:

<center>
  <b>This is the second page</b>
</center>

This second page only contains text that tells the user that this is the second page. Running the home webpage will give the following result on the browser:

As you can see, clicking the link takes us to the second page, and from the second page, you can press the back button to again come to the home.html

Now in the home.html document, you are going to add in the following script lines inside the script tag:

<script>
      window.history.forward();
</script>

In these lines, we are accessing the history of the browser’s window object and then calling the forward() method to move the browser back to the second page. Thus messing with the habitual flow of the back button of the browser.

Key-point

This script will only work when history has some onward entry to go to. This means that the first-time loading of the webpage will never be affected by this.

After this, simply open the home webpage, click the link to go to the second webpage, and then try clicking the back button of the browser, and you will get the following output:

As you can see, clicking the back button on the browser’s doesn’t take us back to the home.html rather it takes us again on the secondPage.html

Conclusion

To stop the working of the browser’s back button with the help of JavaScript. You can simply call the forward() method on the history of the web browser merienda the webpage has loaded. Now to get access to this history, we must use the window object. This article has demonstrated the working of the window.history.forward() method to stop the working of the back button of the browser.



Source link


JavaScript can fulfill the users/developers’ needs through a bundle of events and methods.
It generates a pop-up/alert message for confirmation of the closing of a tab or browser. JavaScript functionality can be extended to detect some events in the browser or in the tab. For instance, it can be used to detect a tab or browser closing by utilizing JavaScript. For this purpose, the beforeunload event of JavaScript is used.

The beforeunload event is suitable for transactions or paying bills, or during the filling of any online form where data loss may occur. This post guides you to apply the beforeunload event to check a tab or browser closing in JavaScript.

How to Detect a Tab or Browser Closing in JavaScript?

An event beforeunload is triggered to detect the closing of the tab or browser. It generates a pop-up or alert message according to the user’s needs. This event is also triggered while refreshing the webpage. Using this event, users prevent the loss of their unsaved data when they mistakenly navigate away from the current tab.

Example

An example is provided by employing the beforeunload event in JavaScript. The event is just triggered before the page closes the tab or web browser.

Code

<html>
<head>
<h2> An example of detect browser or tab closing using JavaScript</h2>
</head>                    
<body>  
<p>A «beforeunload event» is utilized to detect browser or tab closing.</p>                    
<form><input placeholder = «Please write something….»/></form>                              
<script type=«text/javascript»>
window.addEventListener(‘beforeunload’, function (e) {
e.preventDefault();
e.returnValue = »;
});
</script>
</body>
</html>

 
The description of the code is as follows:

    • An input field is added to interact with the user by writing something.
    • The beforeunload event is employed to check the tab closing event or browser in JavaScript.
    • An addEventListener() is employed to visera the event of closing the tab or web browser.


Note: Some browsers do not support the beforeunload event without first writing some information in the text field.


The above display demonstrates how the beforeunload event detects the browser or tab closing in JavaScript. Moreover, this event also detects the page reload as well.

Conclusion

The beforeunload event of JavaScript can be used to detect a browser or tab closing. This event creates a pop-up/alert whenever the tab or browser is being closed/refreshed. This article explains the usage and working of the beforeunload event to detect the closing of the tab or browser. The latest web browsers support the beforeunload event to detect the closing of a particular tab or browser. Most of the usage of the beforeunload event is in educational, e-commerce sites, payment methods to prevent the data loss.



Source link


Responsively app Linux

Responsively App is a free and open source dev tool for responsive web development, available for Linux, Microsoft Windows and macOS. It’s a modified browser that uses Electron, which shows a web app on multiple devices at the same time and in a single window with mirrored user interactions, DevTools, and more.

The application had its first public release back in March 2020, and is already finta popular, but I’ve only recently stumbled upon it and thought I’d share it with you.

Main Responsively App features:

  • Mirrored user-interactions across all devices: an action (like click, scroll, etc.) performed on one device is mirrored on all other devices
  • Customizable preview layout
  • A single element inspector for all devices in preview
  • 30+ built-in device profiles with option to add custom devices (including a special responsive mode device for freely resizing a screen)
  • One-click screenshot all your devices (full page screenshots of all devices or just a single device)
  • Utilitario-reload for all devices in real-time for every HTML / CSS / JS save

The application also includes a live CSS editor, touch mode, design mode that allows users to edit HTML directly without dev tools, network speed emulation options, teleobjetivo, disable SSL validation, and support for various protocols (file://, ftp://, etc.), and much, much more.

Using Responsively App, you also get network proxy support, light and dark themes and shortcut keys.

You might like: How To Enable Hardware Accelerated Video Decode In Google Chrome, Brave, Vivaldi And Opera Browsers On Debian, Ubuntu Or Linux Mint

There are also optional browser extensions (for Chrome, Firefox and Edge) that you can use to easily send links from your web browser to Responsively App to preview instantly.

In the future, the plan is to add features like built-in Lighthouse metrics, browser tabs and a screenshot gallery, among many other improvements and tweaks.

It’s also worth noting that while there are finta a few alternatives to Responsively App, like Polypane or Sizzy, most of them are closed source / paid. From what I could find, Responsively App is the only one that’s free and open source, thought I may have missed some app.

As for Linux packages, Responsively App is packaged as an RPM for Fedora, openSUSE, etc., and as an AppImage, which should work on most Linux distributions.

You might also like: Save Web Pages As Single HTML Files For Offline Use With Monolith (Console)

Download Responsively App

To use the AppImage on Linux, right-click it, choose Properties and under Permissions, look for an option to allow executing the file as a program (this varies between file managers). Then to launch it, simply double-click the .AppImage file.


Extension Manager is a new, unofficial application to browse and install GNOME Shell extensions from your desktop, without having to use a web browser. 

Besides allowing users to search and install extensions from extensions.gnome.org, the tool can also enable or disable extensions (and display a list of installed extensions), access the extension settings, and uninstall extensions.

The application is very new, having its first (0.1.0) release only a couple of days ago, so it’s still lacking in features.

Extension Manager does not currently support updating extensions or translations. Also, only the first 10 results are displayed when performing a search, and there’s no option to sort the search results (e.g. by popularity, recency, etc., like on the GNOME Extensions website). Extension screenshots and comments are also not available right now.

However, even with these missing features, Extensions Manager solves the issue of having to install a browser extension and connector, and use a supported web browser to install GNOME Shell extensions. For example, using Chromium or Firefox installed from Flathub or the Snap Store can’t be used to install GNOME Shell extensions from the official website as far as I know.

How to install Extension Manager for GNOME Shell

Arch Linux / Manjaro users can install Extension Manager from AUR.

[[Edit]] The tool is now available on Flathub, so it can be easily installed on most Linux distributions. If you haven’t installed Flatpak and added the Flathub repository already, see the instructions from this page.

Previously, you had to manually install the .flatpak package from its GitHub downloads page (and add the gnome-nightly Flatpak repository) – those instructions have now been removed.