Set iFrame src from window.location

Question 1

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"

Thank you a ton!!!!

Question 2

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.

Question 3

Jared thank you but I'm a jQuery rookie. How do I code that?

Question 4

Take a look at this fiddle: 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.

Question 5

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

Question 6

that worked. It allowed me to target an iframe location from a form submit

Question 7

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/

Question 8

Jared thank you. If I pass the param to the fiddle url it doesn't update the iframe source. jsfiddle.net/rUnQd/6/…

Question 9

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.

Question 10

Jared, thank you again. I set that off jsFiddle but still not working - maybe I missed something here? digitalctn.com/Asicslocator/…

Question 11

You're using an XHTML DOCTYPE, which means your script tags need to be <script type="text/javascript">//<![CDATA[...code...//]]></script>. 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 <!doctype html>. 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.

Question 12

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. jfcoder.com/t/… Here it is not working: jfcoder.com/t/…

Question 13

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);

Question 14

<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"'

Question 15

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

Chandra Sekhar Walajapet 2,55418 silver badges24 bronze badges · Answer 1 · 2012-09-27 06:15:15Z

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

that worked. It allowed me to target an iframe location from a form submit

Jared Farrish 49.4k17 gold badges100 silver badges108 bronze badges · Answer 2 · 2012-09-27 06:29:55Z

1

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/

Share

Improve this answer

answered Sep 27, 2012 at 6:29

Jared Farrish's user avatar

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

6 Comments

user1410949

user1410949 Over a year ago

Jared thank you. If I pass the param to the fiddle url it doesn't update the iframe source. jsfiddle.net/rUnQd/6/…

2012年09月27日T06:44:00.823Z+00:00

Jared Farrish

Jared Farrish Over a year ago

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.

2012年09月27日T06:50:41.313Z+00:00

user1410949

user1410949 Over a year ago

Jared, thank you again. I set that off jsFiddle but still not working - maybe I missed something here? digitalctn.com/Asicslocator/…

2012年09月27日T07:32:45.19Z+00:00

Jared Farrish

Jared Farrish Over a year ago

You're using an XHTML DOCTYPE, which means your script tags need to be <script type="text/javascript">//<![CDATA[...code...//]]></script>. 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 <!doctype html>. 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.

2012年09月27日T07:42:26.627Z+00:00

Jared Farrish

Jared Farrish Over a year ago

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. jfcoder.com/t/… Here it is not working: jfcoder.com/t/…

2012年09月27日T07:57:21.913Z+00:00

|

Robyflc 1,20911 silver badges16 bronze badges · Answer 3 · 2012-09-27 06:17:21Z

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);

Man Programmer 5,3662 gold badges24 silver badges21 bronze badges · Answer 4 · 2012-09-27 06:20:44Z

<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"'

muthu 5,4892 gold badges35 silver badges41 bronze badges · Answer 5 · 2012-09-27 06:27:50Z

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

CollectivesTM on Stack Overflow

Set iFrame src from window.location

5 Answers 5

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

5 Answers 5

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related