Question

The URLs like below are supported on my site:

(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

Now I am trying to show my site as iframe on another site. That site supports setLocation and onLocationChanged methods to define hash and react when hash is changed accordingly.

I’ve defined setLocation for all pages, no problem here. So, links above at 3rd party site look like below:

(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

But now I am trying to implement correct onLocationChanged behaviour.

section is common part for all pages.

I’ve tried to do the following at the main page (and not supporting option (4) above):

// location here is everything after # in 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+'/';
      }
}

But it doesn’t work properly. What is wrong with my approach?

Answer 1

Here is the code working properly at the main page:

function onLocationChanged(loc) {
    var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
    if (loc.indexOf('page') > -1 && loc.indexOf(',page') == -1) {
        window.location.href = '#' + loc;
    } else if (loc == 'add') {
        window.location.href = url + 'add';
    } else if (loc != '' && loc.indexOf(',page') > -1) {
        window.location.href = url + '' + loc.split(',', 2)[0] + '/#' + loc.split(',', 2)[1];
    } else if (loc != '') {
        window.location.href = url + '' + loc + '/';
    }
}

and here is the code for other pages (without option (4) support):

function onLocationChanged(loc) {
  var url = window.location.protocol + '//' + window.location.host + '/' + window.location.pathname.split('/',3)[1] + '/';
  if (loc.indexOf('page')>-1) {
    window.location.href = url + '#' + loc;
  } else if (loc == 'add') {
      window.location.href = url + 'add';
    } else if (loc != '') {
        window.location.href = url + '' + loc + '/';
      }
}

Don’t know how to make it common.