My website supports URLs in the following formats:
(1) http://mysite.example.com/section/ - main page
(2) http://mysite.example.com/section/#page2
(3) http://mysite.example.com/section/surname-name-middlename/
(4) http://mysite.example.com/section/surname-name-middlename/#page2
(5) http://mysite.example.com/section/add
Currently, I am attempting to display my site within an iframe on another website. This external site allows me to use the setLocation
and onLocationChanged
methods to manipulate and respond to URL changes with hash tags.
I have successfully implemented the setLocation
for all pages on the external site. Here is how the links above look on the third-party site:
(1) http://3rdpartysite.com/mypage
(2) http://3rdpartysite.com/mypage#page2
(3) http://3rdpartysite.com/mypage#surname-name-middlename
(4) http://3rdpartysite.com/mypage#surname-name-middlename,page2
(5) http://3rdpartysite.com/mypage#add
However, I am now facing a challenge with implementing the correct behavior for the onLocationChanged
method.
The "section" part of the URL is consistent across all pages.
In trying to address this issue at the main page (excluding option 4 above), I have attempted the following:
// The location parameter corresponds to everything after the # in the URL: http://3rdpartysite.com/mypage#...
function onLocationChanged(location) {
if (location.indexOf('page') > -1) {
window.location.href = '#' + location;
} else if (location == 'add') {
window.location.href = window.location.host + window.location.pathname + '/add';
} else if (location != '') {
window.location.href = window.location.host + window.location.pathname + '/' + location + '/';
}
}
Despite these efforts, the functionality does not work as intended. What could be the issue with my approach?