How to redirect URL inside iframe

Do you know that if you use <iframe> tag, you can have another website inside website. It might sounds strange at first.

Let me give you an example. My company has a corporate website. It is a static site. However, there is a FAQ page using service called INTERCOM.

By using INTERCOM, we can make an independent FAQ page inside static website.(INTERCOM calls FAQ page Help Center. You can read more about it here

Today I want to write about how to make use of <iframe>.

Set up iframe

First of all, let’s set up iframe. You just have to insert following tag in your html file.

<iframe id="sample-iframe" src="add url here" style="border:none;"> </iframe>

style="border:none;" defines the existence of border. In this case, a border won’t appear. frameborder="0" attribute was used before but it’s not supported in HTML5.
So it’s better to use CSS not attribute.

Set up a custom URL

Speaking of INTERCOM, it’s a convenient service to make a FAQ page without headache. By default, the URL of FAQ page will be like this.

If your website is https://info.sample.com/, the URL for FAQ page will be https://sample.com/info.

But it’s also possible to set up a custom domain by setting up CNAME file and setting inside INTERCOM.

If you set up a custom URL, you need to redirect INTERCOM default url to custom URL.

For instance, if you want to reach to https://info.sample.com/post-1 , custom URL shows https://sample.com/info , not https://info.sample.com/info/post-1 .
The custom URL doesn’t specifies a specific page.

Redirect URL to show a specific page

In order to show a specific page with a custom domain, we need to parse default URL’s parameter.

At first, we need a parser to extract value of parameter.

1
2
3
4
5
6
7
8
9
10

getQueryParam(name, url){
if (!url) return null;
name = name.replace(/[[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
var results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '))
}
};

By using queryParser function, let’s pass search to variable iframePathName.
This should be processed only when window.location is https://sample.io/info/.

1
2

    var iframePath= queryParser.getQueryParam('info_iframe_path', window.location.search)
}

Value of var iframePathName should be /?info_iframe_path=post-1.

Call iframe and redirect URL

Now we can combine iframe URL and pathname of specific page.

First of all, let’s call iframe URL.

var iframe = $('#intercom-iframe');

Then let’s override iframe src. It will reload a new iframe src.

iframe.attr('src', iframe.attr('src') + iframePath

The url should be like this https://sample.io/info/?info_iframe_path=post-1. Then this url redirect to page https://sample.io/info/post-1to show a page where post-1 is.

The whole codes is like below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var queryParser = {
        getQueryParam(name, url){
        if (!url) return null;
        name = name.replace(/[[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
        var results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '))
        }
        };

       if(window.location.pathname == '/info/') {
       var iframePath = queryParser.getQueryParam('info_irame_path', window.location.search)
       var iframe = $('#intercom-iframe');
       iframe.attr('src', iframe.attr('src') + iframePath
       }

By making use of parsing URL, you should be able to expand the possibility of iframe!