o7planning

Javascript Locationbar Tutorial with Examples

  1. window.locationbar

1. window.locationbar

window.locationbar returns the Locationbar object. It represents the address bar of browser. However, you can hardly interact with it because it has very few APIs for you.
The only property supported by Locationbar is visible. locationbar.visible returns true if Address bar is displayed in the browser, on the contrary, it returns false
locationbar-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Locationbar</title>
    <meta charset="UTF-8">
    <script>

        function test()  {

           alert(locationbar.visible);
        }
    </script>
</head>
<body>
    <h3>Locationbar</h3>

    <button onclick="test()">Locationbar visible?</button>

</body>
</html>
Note: For modern browsers, you can not set a new value for locationbar.visible, if you do it on purpose, it doesn't work.
Therefore, what way is there to open a new browser window without this Locationbar? The answer is yes but it works on only some old browsers. New browsers, by default, disable this feature.
open-new-window-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Locationbar</title>
    <meta charset="UTF-8">
    <script>

        function openNewWindow()  {
           var winFeature =
             'location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes';

           // Open a New Windows.
           window.open('some-page.html','null',winFeature);
        }
    </script>
</head>
<body>
    <h3>Locationbar</h3>

    <button onclick="openNewWindow()">Open a New Window</button>

</body>
</html>
When running the above example in the Firefox browser, the window opened newly still displays address bar. The cause is that by default, the Firefox browser has disabled this feature.
If you want the above example to work with the Firefox browser, you have to take some configuration steps.
  • about:config
Set:
  • dom.disable_window_open_feature.location = false
Run the above example again with the Firefox browser:
In brief, the Locationbar object does not have many features for you to use.

ECMAScript, Javascript Tutorials

Show More