#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    Pass URL QueryString to IFrame source


    Hi,

    I'd like to know if anyone has an idea on how to pass a Query String from the parent page URL to the 'src' of an iframe that is within it?

    This is the idea: site A= website.com, site B= othersite.com. Site A has an iframe within it that loads site B. However, site B has a page such as .../index.asp?id=123. The point would be to allow a parent url link such as website.com/index.html?id=123 to load othersite.com/index.asp?id=123 in the iframe within the parent frame.

    I was looking for a client-side setup. I tried
    Code:
    <iframe src="othersite.com/index.asp?id=""'+request.querystring("id")+'">
    as well as
    Code:
    var id=request.querystring("id")
    <iframe src="othersite.com/index.asp?id='<%=id%>'">
    and several variations of that, but it did not work.

    Might it be related to 'cross site scripting'?

    A solution can be JSON/jQuery/AJAX or something else (Client Side, though). It doesn't have to use an iframe.

    If answering, please post an example script.

    Thanks.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    You need to target the iframe; like so:

    Code:
    <iframe name="search" src="http://www.lycos.com"></iframe>
    
    <a href="http://search.lycos.com/web?q=DevShed" target="search">Search For DevShed On Lycos</a>
    Or...

    Code:
    <iframe id="search" src="http://www.lycos.com"></iframe>
    
    <a href="http://search.lycos.com/web?q=DevShed" target="search">Search For DevShed On Lycos</a>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thank you for replying. However, the point would be to allow a link from another page/site to load a variable iframe on the new page.

    As such: a link on page a.html would open page b.html which has an iframe within it. The idea would be for the link to specify the url for the iframe to load on the linked page (b.html).

    For example, website.com/a.html would have a link 'website.com/b.html?id=123' which would open website.com/b.html. .../b.html would contain an iframe with a variable source and the link from a.html would specify what the variable should be... Such as website.com/b.html?id=123 would open b.html with an iframe containing otherwebsite.com/index.asp?id=123.

    In fact it doesn't have to use an iframe. The point would be to load otherwebsite.com with a variable query string within website.com/b.html.

    Thanks.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    I think you mean something like: a link on a page (under your domain); that sends a query string to an iframe (with a page in it, from another domain); that resides in... another page (under your domain); is that correct?

    If so... you can do something like this:

    Webpage_A.html

    Code:
    <a href="Webpage_B.html?iFrameQuery=DevShed">DevShed</a>
    Webpage_B.html

    Code:
    <iframe id="myIframe" src="http://search.lycos.com/web"></iframe>
    <script>
    (function() {
    var frameBaseSRC = document.getElementById("myIframe").src;
    var frameQueryString = document.location.href.split("iFrameQuery=")[1];
     if (frameQueryString != undefined) {
      document.getElementById("myIframe").src = frameBaseSRC + "?q=" + frameQueryString;
     }
    })();
    </script>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thanks. I tried it but it doesn't seem to work. It loads an error page as though the variable in the query string was not passed along. For example, linking website.com/index.html?id=123 which would load another page on the same site, with an iframe within that would load otherwebsite.com/index.asp?id=123. It seems to leave out the query string and just load otherwebsite.com/index.asp...
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    The example that I provided; does work. I even tested it locally and if it wasn't going to work; XSS brower security messures would have prevented it, but it did not. Post the code you have; so I can make sure you set-up the variables, that I provided you.

    You need to make sure it's set-up like so (based on the query string variables; that you provided):

    Code:
    <a href="http://www.website.com/index.html?id=123 ">Visit Otherwebsite</a>
    Code:
    <iframe id="myIframe" src="http://www.otherwebsite.com/index.asp"></iframe>
    <script>
    (function() {
    var frameBaseSRC = document.getElementById("myIframe").src;
    var frameQueryString = document.location.href.split("id=")[1];
     if (frameQueryString != undefined) {
      document.getElementById("myIframe").src = frameBaseSRC + "?id=" + frameQueryString;
     }
    })();
    </script>
    Last edited by web_loone08; January 16th, 2013 at 04:37 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Now it works! I was putting the script above the iframe (not in the 'body') and it wasn't working. Now it is below it and it works.

    Thanks!
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Yeah, I used anonymous function; it is a hierarchical based function. If the element is below the function, the function is triggered long before the browser even conceives, that the html element (the function is accessing... in this example... it's an iframe) has been created, within the document. Because it is a "hierarchical based" function; if the html element is above the function; the document will perceive that the element has been created and then the function will be triggered and the function will access the element; as it is supposed to. You could put this function in the head of the document; in a defined function, but you will have to wait until a document event occurs to trigger the function.

    In layman's terms; yes, the function has to be below the iframe, for it to work.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    2
    Rep Power
    0

    More information - Pass URL QueryString to IFrame


    Hi All - I am no coder so please bear with me. I have created a page with an iFrame and was hoping to use the code suggested in this thread.

    I am having a bit of an issue using the code however:

    <iframe id="myIframe" src="#"></iframe>
    <script>
    (function() {
    var frameBaseSRC = document.getElementById("survey").src;
    var frameQueryString = document.location.href.split("id=")[1];
    if (frameQueryString != undefined) {
    document.getElementById("myIframe").src = frameBaseSRC + "?id=" + frameQueryString;
    }
    })();
    </script>


    I have given my iFrame an ID called "survey".

    From an email I load the url with additional dynamic ids etc onto the page e.g URL/test. It then becomes URL/test?spMailingID=18521841&spUserID=Njk5Nzc2MTU5MTUS1&spJobID=245687208&spReportId=MjQ1Njg3MjA4S0 for example.

    The iFrame base URL is URL?surveyId=NDAyODMS1. I want to load some of the dynamic components of the parent url to the end of the iFrame URL so that it reads: URL/servlet/survey?surveyId=NDAyODMS1&spMailingID=18521841&spUserID=NjkxNzY4MzA1MzIS1&spJobID=245687208&spReport Id=MjQ1Njg3MjA4S0 i.e would like to add the spMailingID=18521841&spUserID=Njk5Nzc2MTU5MTUS1&spJobID=245687208&spReportId=MjQ1Njg3MjA4S0 to the end of URL?surveyId=NDAyODMS1 (bearing in mind I want to change the beginning from a "?" to a "&" too).

    Any help would be greatly appreciated

    Cheers
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Do you mean something like this?
    Code:
    <iframe id="survey" src="URL?surveyId=NDAyODMS1"></iframe>
    <script>
    (function() {
    var fullQuery;
    var frameBaseSRC = document.getElementById("survey").src;
    var frameQueryString = document.location.href.split("&");
     if(frameQueryString.length > 1){
            for(i=1;i<frameQueryString.length;i++){
    		fullQuery += "&" + (frameQueryString[i]);
            }
    	 fullQuery = fullQuery.replace("undefined","");
              document.getElementById("survey").src = frameBaseSRC.split("?")[0] + "/servlet/survey?" + frameBaseSRC.split("?")[1] + fullQuery;
     } 
    })();
    </script>
    Another possible way to go..., would be with something like this:
    Code:
    <iframe id="survey" src="URL?surveyId=NDAyODMS1"></iframe>
    <script>
    (function() {
    var fullQuery = ["/servlet/survey"];
    var frameBaseSRC = document.getElementById("survey").src;
    var frameQueryString = document.location.href;
    fullQuery.push(frameQueryString.split("?")[1]);
         if(fullQuery[1] != undefined) {
          document.getElementById("survey").src = frameBaseSRC.split("?")[0] + fullQuery[0] + "?" + frameBaseSRC.split("?")[1] + "&" + fullQuery[1];
         }
    })();
    </script>
    Last edited by web_loone08; December 26th, 2013 at 09:47 PM. Reason: Added Another Example for OP
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    2
    Rep Power
    0

    Got it to work


    Much appreciated! Saved me a lot of hard work otherwise.

IMN logo majestic logo threadwatch logo seochat tools logo