Set iFrame src from window.location

Question

Using jQuery or javascript, I have fumbled with this and finally give in.

How can I set an iframe src like this:

If the window URL contains a parameter starting with "?sku="
Cache entire parameter from ? to end (?sku=T235N&addressline=90803&form=product_search)
Change iframe src from /index.html to /default.html + parameter?

Change iframe src="/index.html to src="/default.html?sku=T235N&addressline=90803&form=product_search"

http://jsfiddle.net/Digitalctn/rUnQd/

Thank you a ton!!!!

Use `console.log(window.location)` in Firebug or Chrome Console and take a look at what's in that object. Then use `window.addEventListener`/`window.attachEvent` to listen to page load and set the `iframe`'s `src` property with what you find useful in the `location` object. — Jared Farrish, Sep 27 '12 at 06:13
Jared thank you but I'm a jQuery rookie. How do I code that? — user1410949, Sep 27 '12 at 06:16
Take a look at this fiddle: http://jsfiddle.net/userdude/rUnQd/6/ Note, it won't do anything since there's no `sku` to be found. But that should work in practice. — Jared Farrish, Sep 27 '12 at 06:26

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

i am not sure what have you tried with javascript on the above solution, even in fiddle i couldnt see any javascript

i would recommend you to go through the below posts

Using the GET parameter of a URL in JavaScript

the above post will help get the parameter "sku"

now if you have any value in the same you can set the iframe src by

document.getElementById("iframeid").src = "default.html?sku="+sku

edited May 23 '17 at 11:58

Community

1
1

answered Sep 27 '12 at 06:15

Chandra Sekhar Walajapet

2,534
17
24

that worked. It allowed me to target an iframe location from a form submit – Michael d Sep 09 '15 at 00:14

score 0 · Answer 2 · answered Sep 27 '12 at 06:17

0

Just find the '?' in window location and set the src:

var url = window.location;
var pos = url.indexOf('?');
var query = url.substring(0,pos+1);

then set it with JQuery:

$('iframe').attr('src','/default.html?'+query);

answered Sep 27 '12 at 06:17

Robyflc

1,209
11
16

score 0 · Answer 3 · answered Sep 27 '12 at 06:20

<iframe id="changeIframe" src="http://hosted.where2getit.com/asics/index.html" frameborder="1" width="920" height="635" scrolling="no"></iframe> 

document.getElementByid("changeIframe").src='http://hosted.where2getit.com/asics//default.html?sku=T235N&addressline=90803&form=product_search"'

score 0 · Answer 4 · edited Jun 08 '13 at 20:37

0

You may try like this

$(function () {
    var url = parseUrl(window.location.pathname).search;
    if (url.match("sku").length > 0) {
        $('#iframe1').attr('src', '/default.html' + url);
    }
});

function parseUrl(url) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

And the jsfiddle

edited Jun 08 '13 at 20:37

Joe

15,205
8
49
56

answered Sep 27 '12 at 06:27

muthu

5,381
2
33
41

score 0 · Answer 5 · answered Sep 27 '12 at 06:29

0

First, give your iframe an id so we can getElementById:

<iframe src="http://hosted.where2getit.com/asics/index.html" id="sku_frame"

Then, setup a script to run on page load, detect if there's an sku= key in the location.search string, and grab the iframe reference and modify it's el.src:

(function load(){

    if (window.addEventListener) {
        window.addEventListener('load', run);
    } else if (window.attachEvent) {
        window.attachEvent('onload', run);
    }

    function run() {
        var hassku = !!(location.search.indexOf('sku=') + 1);

        if (hassku) {
            document.getElementById('sku_frame').src = '/default.html' + location.search;
        }
    }

})();

http://jsfiddle.net/userdude/rUnQd/6/

answered Sep 27 '12 at 06:29

Jared Farrish

48,585
17
95
104

Jared thank you. If I pass the param to the fiddle url it doesn't update the iframe source. http://jsfiddle.net/rUnQd/6/?sku=T235N&addressline=90803&form=product_search – user1410949 Sep 27 '12 at 06:44
There's not really a simple way to get jsFiddle to mock that; the `window` it's actually referencing is the `iframe` to the bottom, right, where the content displays. Which is not that simple to modify without `jsFiddle` freaking out. Also, note you're using a base relative URL, e.g., `/default.html`. You would need to compensate for that on jsFiddle, as well, since it will point to `http://fiddle.jshell.net` instead. – Jared Farrish Sep 27 '12 at 06:50
Jared, thank you again. I set that off jsFiddle but still not working - maybe I missed something here? http://www.digitalctn.com/Asicslocator/?sku=T235N&addressline=90803&form=product_search/ – user1410949 Sep 27 '12 at 07:32
You're using an XHTML DOCTYPE, which means your `script` tags need to be ``. Unless you have a *good* reason for using XHTML (other than "I use it to check for errors in markup"), do not use XHTML; use HTML5, which would be ` `. If you open that page with a `console` open, you'll see it's throwing an illegal character error on the space at the very end of the code block. – Jared Farrish Sep 27 '12 at 07:42
Apparently, there was some junk at the end of the block too (maybe an encoding error). Anyhow, you don't need to put the `?` on `default.html` either; `location.search` already has it. Here it is "working" (the url loads an empty response). However, I show you the URL in the `IFRAME src`, and color the border `blue` so you can tell something's happened. http://jfcoder.com/t/Fiddle.html?sku=T235N&addressline=90803&form=product_search/ Here it is not working: http://jfcoder.com/t/Fiddle.html?uks=T235N&addressline=90803&form=product_search/ – Jared Farrish Sep 27 '12 at 07:57
Ok, I see; the `iframe` is a valid XHTML application. That doesn't mean the page the parent document needs to be, but it works either way. I put the XHTML DOCTYPE back. – Jared Farrish Sep 27 '12 at 08:03

Set iFrame src from window.location

5 Answers5