General Information
JavaScript in Facebook, just like FBML and HTML, gets parsed and rewritten by Facebook before it is rendered for the user. Therefore, it is important that you follow some specific rules to ensure that your JavaScript is fully compatible with Facebook. The rules to keep in mind are as follows:
JavaScript methods and variables should be prepended with the application ID, followed by an “
_” in Facebook. This won’t affect your code too much, but it’s important to remember, as in certain instances you may need to call the method or variable with the application ID attached. In most cases you can just call the method name or variable name by itself and Facebook will handle all the magic!On profiles, JavaScript will not run without the user making some sort of click action first. Therefore, it’s necessary to have an
onClickevent handler of some sort within a link or element in order to launch anything on profile pages. On canvas pages, the click action is not necessary.Most DOM methods will work, but to retrieve information you must prepend the method with
get. To set information, you must prepend the method name withset, and rather than assigning a value via the=sign, you must instead pass in the value as a variable. So, instead of:document.getElementById('my_div').innerHTML = 'test content';you would do this in FBJS:
document.getElementById('my_div').setInnerHTML('test content'),Table 4-1 lists all the methods available and their
getandsetequivalents (this list is taken from the Developer Wiki).Note
The JavaScript methods in this table that have no descriptions work the same way they do in normal JavaScript.
| JavaScript method | FBJS “get” equivalent | FBJS “set” equivalent | Description |
parentNode | getParentNode | ||
nextSibling | getNextSibling | ||
previousSibling | getPreviousSibling | ||
firstChild | getFirstChild | ||
lastChild | getLastChild | ||
childNodes | getChildNodes | ||
innerHTML | setInnerFBML | Direct strings passed to this method may throw an error. Pass all strings to <fb:js-string/> first, and
then load the variable from that. Note that you cannot do getInnerHTML. | |
innerHTML | setInnerXHTML | XHTML/HTML passed to this method gets sanitized by
Facebook. Note that you cannot do getInnerHTML. | |
innerText/textContent | setTextValue | Allows plain-text values only; child nodes get removed.
There is no get equivalent. | |
form | Use
document.getElementById('form_id')
instead. | ||
action | getAction | setAction | |
value | getValue | setValue | |
href | getHref | setHref | |
target | getTarget | setTarget | |
src | getSrc | setSrc | |
className | getClassName | setClassName | |
addClassName(className) | Adds className as a new class. | ||
removeClassName(className) | Removes the class className. | ||
toggleClassName(className) | If the class className exists, removes it. If not, adds it. | ||
hasClassName(className) | Returns true if
className exists. Returns
false otherwise. | ||
tagName | getTagName | ||
id | getId | setId | |
dir | getDir | setDir | |
checked | getChecked | setChecked | |
clientWidth | getClientWidth | ||
clientHeight | getClientHeight | ||
offsetWidth | getOffsetWidth | ||
offsetHeight | getOffsetHeight | ||
getAbsoluteTop | Returns the absolute position from the top of the page. | ||
getAbsoluteLeft | Returns the absolute position from the left of the page. | ||
scrollTop | getScrollTop | setScrollTop | |
scrollLeft | getScrollLeft | setScrollLeft | |
scrollHeight | getScrollHeight | ||
scrollWidth | getScrollWidth | ||
tabIndex | getTabIndex | setTabIndex | |
title | getTitle | setTitle | |
name | getName | setName | |
cols | getCols | setCols | |
rows | getRows | setRows | |
accessKey | getAccessKey | setAccessKey | |
disabled | getDisabled | setDisabled | |
readOnly | getReadOnly | setReadOnly | |
type | getType | setType | |
selectedIndex | getSelectedIndex | setSelectedIndex | |
selected | getSelected | setSelected | |
location | setLocation | ||
style | getStyle | setStyle | |
getRootElement | Returns the topmost element of your profile box or canvas page. | ||
getSelection | setSelection(start,
end) | Allows the retrieval and setting of values in a text-box element. |
One of the biggest headaches in FBJS is the lack of
get methods for innerHTML-type
methods. You can get around this by setting a variable and manipulating
that, and then accessing that variable in your JavaScript.