On most OpenSocial containers, links to other parts of the current view frequently will not work. Here’s an explanation of why and one mechanism to work around the issue. When talking about the views that an application can have, I mentioned that all these views run in an iframe. Many containers, including MySpace, use the fragment identifier on the iframe to communicate information between the parent window and the iframe window. Before we go too far, I need to define the term fragment identifier and explain its use.
The fragment identifier is the part of the URL after the hash mark ‘#’. Originally, the fragment identifier was created to allow for links to a specific location within a document. Let’s assume we have a document at http://www.example.com/HowTo.html. Within that document, we might add an ID to each <h1> and <h2> level heading, like so:
<h1 id="iframeInfo">Talk about iframe</h1>
This allows me to do two things. If I want to direct a person to this section of the document, I can send this URL: http://www.example.com/HowTo.html#iframeInfo. Pasting that link into a browser brings the reader to the iframeInfo item within the document. Likewise, the person can create a table of contents or other link in the document. The link to the iframeInfo heading looks like this:
<a href="#iframeInfo">Link to 'Talk about iframe'</a>
All this falls apart if someone else is using that fragment identifier to communicate in between a window and your application view. MySpace and other containers do just that. Why? If the fragment identifier is set to rubbish, the page does absolutely nothing—no refresh, no page jump, nothing. MySpace can pass updated credentials, refresh data, and so on because code in the main window and code in the iframe window cooperate to write and read those changes. As an application developer, this means that you don’t get access to the # element, so you can’t jump to interesting parts of the document using simple links. The common use of this functionality is to allow the user to jump to the top of the page. You would like to write this:
<a id="top">Top</a>
<!-- html that does stuff is here --><a href="#top">Go to top</a><a name="something">Something else</a>
But, you don’t own the iframe fragment identifier. Is all hope lost? No. For this case, you need to write the following instead:
<script type="text/javascript">
function scrollto(elemName) {
var elem = document.getElementById(elemName);
if (elem == null) {
var aTags = document.getElementsByTagName("a");
if (aTags != null) {
for (var i = 0; i < aTags.length; i++) {
if (elemName == aTags[ i ].getAttribute("name")) {
elem = aTags[ i ];
break;
}
}
}
if (elem != null) {
elem = elem[0];
}
}
window.scrollTo(elem.offsetLeft, elem.offsetTop);
}
</script>
<div onclick="scrollto('top');">Go to top</div>
<div onclick="scrollto('something');">Go to something</div>
This gives the equivalent functionality of the fragment identifier link- it’s just a bit different. Feel free to add this to your toolset as you develop applications on the MySpace Developer Platform (MDP).