CODEWITHSUNDEEP
htmlwordpressfunctionurl
Chris
Chris

Reputation: 11

Passing a specific url query param from main url into the iframe url

This is what I have.

URL = abc.com/?em=xyz&fn=123

I have an iframe on the page which I want to share some of the param data as follows...

iframe= def.com/xyz

As you can see I just want one of the url params from the main source url to carry across to the iframe, to be part of the url, not an added param on the iframe string. It would always be the single param 'em' that would be carried across, all other params would be ignored.

I think this was clear, but just to show an example of correct iframe = def.com/xyz and wrong would be an iframe with the url = def.com/?em=xyz. I know the latter seems possible in Javascript. I just cannot work out the former. Thanks

Hope someone has any help.

The site is currently on Wordpress if that makes a difference. The iframe url is an external link,not wordpress

Thanks

Upvotes: 0

Views: 1800

Answers (2)

Chris
Chris

Reputation: 11

Right, I have a solution that is working for me so thought I would share. It is important to note that this will probably only work if you are using Wordpress...

Step 1. I created a new page template , called page-iframe php. which references a content file called content-iframe php

In this file I created the iframe code..

<iframe src="domain.com/<?php echo do_shortcode('[urlparam param="em" /]') ?></iframe>

This uses the URL Params Wordpress plugin to read the url and place the param of choice into the iframe which is hard coded into the page template, rather than added in the content/edit area of the wordpress back end.

The only drawback to this as I see it will mean a new page template for every domain you want to use inside the iframe. I only require one domain to be referenced so this is a solution for me.

Upvotes: 1

user7625907
user7625907

Reputation:

Purely javascript:

First a function to grab the parameters in the parent URL:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Next, call the function to get the 'em' parameter value and store as a variable. Also check that it is defined and not erroneous.

var myParam = getQueryVariable("em");
if ((typeof myParam !== "undefined") && (myParam !== false)) {

Next, create your iframe URL:

    var iframeURL = "def.com/".concat(myParam);

Next, assign the iframe URL in your html to this new iframeURL:

    document.getElementById('iFrameName').src = iframeURL;
    }

Optional; sending the url without an em parameter. You could have done this already in your html.

else{
    document.getElementById('iFrameName').src = "http://def.com/";
}

All together:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var myParam = getQueryVariable("em");
if ((typeof myParam !== "undefined") && (myParam !== false)) {
    var iframeURL = "def.com/".concat(myParam);
    document.getElementById('iFrameName').src = iframeURL;
    }
else{
    document.getElementById('iFrameName').src = "http://def.com/";
    }

Upvotes: 0

Related Questions