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 onClick
event 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 with
set
, 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 get
and set
equivalents
(this list is taken from the Developer Wiki).
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. get Element ById ('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.
18.223.213.238