CODEWITHSUNDEEP
javascripthtmliframe
lmg
lmg

Reputation: 79

iframe source from URL

We have a page on our site that loads an iFrame of an afillate store. We are looking to send an email out with links that would load the page on our site with the details of the product featured in the iFrame. The code I have below is working, but it breaks if a user goes directly to the page on our site - not using a link with the page element defined in the URL.

Not sure if it matters, but the iframe source is on a completely different domain and I have no control over it.

This works: http://www.mysite.html/thispage.aspx?id=16500&page=http://myiframesource.com/detail/0307959473

This doesn't work: http://www.mysite.html/thispage.aspx?id=16500 (the iframe src changes to "undefined" onload)

Here's what I have so far:

<script language="javascript">
    window.onload = updateiframe; //event handler (calls the function)

    function updateiframe() {
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

            for(var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }

            return vars;
        }

        var hash = getUrlVars();
        var myiframepage = decodeURIComponent(hash['page']);
        document.getElementById('myiframe').src = myiframepage;
    }
</script>

<iframe id="myiframe" name="myiframe" src="myiframesource.com" width="555" height="2000" border="0" style="border: 0px solid #ffffff;"></iframe>

Thanks in advance for your help!

Upvotes: 3

Views: 559

Answers (1)

Reinder Wit
Reinder Wit

Reputation: 6615

The URL that doesn't work misses the 'page' parameter.

Your javascript is fetching all the parameters from the URL and puts them in an array. Next it tries to find the 'page' parameter in that array:

var myiframepage = decodeURIComponent(hash['page']);

which is missing obviously. Hence the 'undefined' source for your iframe.

You could add a small piece to your javascript to check for the correct 'id' parameter and if that is 16500 and you are missing the 'page' parameter, you can do a javascript redirect:

var hash = getUrlVars();
var myiframepage = decodeURIComponent(hash['page']);
if(typeof(myiframepage) == 'undefined') {
    var id = decodeURIComponent(hash['id']);
    if(typeof(id) != 'undefined' && id == '16500') {
        window.location.replace('http://www.mysite.html/SiteText.aspx?id=16500&page=http://myiframesource.com/detail/0307959473');
    }
}
else {
    document.getElementById('myiframe').src = myiframepage;
}

This small piece of code shown above should take care of people who don't have the link from your email and browse to the page directly...

And be carefull with passing data like this around. People could easily hijack your iframe and show a malicious website in there, by providing a URL with a different page parameter!

Upvotes: 1

Related Questions