User Tools

Site Tools


developer_center:recipe_book:extensions_and_core:tabbed_browser

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

developer_center:recipe_book:extensions_and_core:tabbed_browser [2013/12/28 10:32] (current)
geekshadow created
Line 1: Line 1:
 +====== Tabbed Browser ======
  
 +Say you want to handle an action when the user types some text in the location bar (otherwise known as the URL bar). This may be because you want to prevent them from changing the page (boooo!), or to redirect them to a cached/​archived version of the page (think archive.org/​GoogleCache extension? weird, but this is contrived... run with me here).
 +
 +To do this, we want to add an event handler to the "​keypress"​ event for the urlbar, e.g.
 +<​code>​
 +function myOnLoad() {
 +    // Prevent the user from typing something in the URL bar and moving
 +    // away from the first tab
 +    var urlbar = document.getElementById("​sb-locationbar-textbox-textbox"​);​
 +    urlbar.addEventListener("​keypress",​ function(e) {
 +        if (e.keyCode == 13) {
 +            // Enter key pressed
 +            if (window.top.gBrowser.mCurrentBrowser == 
 +                        window.top.gBrowser.getBrowserAtIndex(0))
 +            {
 +                alert("​Can not change page on the first tab."​);​
 +                e.stopPropagation();​
 +            }
 +        }
 +    }, true);
 +}
 +
 +window.addEventListener("​load",​ function(e) { myOnLoad(e);​ }, false);
 +</​code>​
 +The above prevents the user from navigating away from the first tab by getting a reference to the current tab (window.top.gBrowser.mCurrentBrowser) and checking it against the first (zero'​th) tab (window.top.gBrowser.getBrowserAtIndex(0)). If they'​re one and the same, then it throws an alert and stops the page from navigating there (e.stopPropagation())
 +===== Overriding Tab Closure =====
 +
 +If you want to prevent the user from removing certain tabs, or want to insert your own code to run when the user tries to close a tab, you can simple do:
 +<​code>​
 +// Save a reference to the original removeTab function
 +gBrowser.realRemoveTab = gBrowser.removeTab;​
 +// Define our new removeTab function
 +gBrowser.removeTab = function(aTab) {
 +    if (window.top.gBrowser.mCurrentBrowser == 
 +        window.top.gBrowser.getBrowserAtIndex(0))
 +    {
 +        alert("​Can not close the first tab."​);​
 +    } else {
 +        this.realRemoveTab(aTab);​
 +    }
 +}
 +</​code>​
 +
 +The above prevents the user from closing the first tab.
 +===== Tracking the Current Media List =====
 +
 +
 +To track the sbIMediaList shown in the browser, you'd need to monitor both loading and tab switching. ​ This is actually quite complicated,​ so a convenience event has been added.
 +
 +
 +Listen for "​TabContentChange"​ and re-check the state of gBrowser.currentMediaListView.
 +<​code>​
 +function myChangeListener() {
 +  if (gBrowser.currentMediaListView) {
 +    alert(gBrowser.currentMediaListView.mediaList.guid);​
 +  } 
 +}
 +gBrowser.addEventListener('​TabContentChange',​ myChangeListener,​ false);
 +</​code>​
developer_center/recipe_book/extensions_and_core/tabbed_browser.txt ยท Last modified: 2013/12/28 10:32 by geekshadow