jQuery Force set src attribute for iframe

Question

I have a main page (actually a JSP) with an iframe inside it as;

<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>

Now there are multiple links on the main page (rendered dynamically via JSP) which can try to set the src to some URL...

Now my question is,using jQuery (may be live()), can I override that in such a way that the "src" attribute for abc_frame would always have some particular value (e.g. "somefixedURL")

I cannot capture the link clicking, as it is completely dynamically created via some Java code and hence I am trying to override the iframe src ?

score 185 · Accepted Answer · edited May 23 '17 at 10:31

185

Use attr

$('#abc_frame').attr('src', url)

This way you can get and set every HTML tag attribute. Note that there is also .prop(). See .prop() vs .attr() about the differences. Short version: .attr() is used for attributes as they are written in HTML source code and .prop() is for all that JavaScript attached to the DOM element.

edited May 23 '17 at 10:31

Community

1
1

answered Sep 26 '11 at 07:44

PiTheNumber

22,828
17
107
180

The reason this would not work is after the page has been loaded, another link would change the src to a new value... – copenndthagen Sep 26 '11 at 08:04
If you pleace the code at the end of the file you code will be executed after the other scripts. If you problem is created by a specific link the user clicks you could add a second onclick event to the link. Otherwise you have to use setTimout/setInterval and repeatly check the value of src (ugly!). – PiTheNumber Sep 26 '11 at 08:55

score 21 · Answer 2 · edited May 23 '17 at 12:17

21

if you are using jQuery 1.6 and up, you want to use .prop() rather than .attr():

$('#abc_frame').prop('src', url)

See this question for an explanation of the differences.

edited May 23 '17 at 12:17

Community

1
1

answered Sep 26 '11 at 07:52

kalyfe

1,005
1
16
33

5

Interesting link but please note that the answer has been updated because jQuery _reverted_ `attr()` behavior. Overall I would disagree on using `.prop()` here because `src` is an attribute not an property as the API documentation for `.prop()` you linked explains. – PiTheNumber Feb 19 '13 at 08:38

score 9 · Answer 3 · answered Aug 08 '12 at 15:52

9

While generating the links set the target to the iframes name property and you probably wont have to deal with jquery at all.

<a href="inventory.aspx" target="contentframe"  title="Title Inventory">
<iframe id="iframe1" name="contentframe"  ></iframe>

answered Aug 08 '12 at 15:52

Brian Rizo

838
9
14

Good idea to use browser's native method when possible, but I think the user has dynamic links so therefore needs to capture the click attr. – ericjam Apr 06 '14 at 00:22
How dynamic? When generating the page just set the href to whatever you need. Or even on dom load just set the href attribute if you have to. The point is to not have to be handling the src property of the iframe and this makes it possible. – Brian Rizo Apr 07 '14 at 16:17

score 8 · Answer 4 · edited Sep 23 '17 at 10:34

8

Setting src attribute didn't work for me. The iframe didn't display the url.

What worked for me was:

window.open(url, "nameof_iframe");

Hope it helps someone.

edited Sep 23 '17 at 10:34

Mahmood Sanjrani

108
3
19

answered Mar 02 '15 at 11:49

Hari

219
4
8

setting with .attr() also did not work for me. This works though – Andy N Nov 29 '18 at 19:01
This solution worked fine for me. Thanks. – Sedat Kumcu Apr 12 '21 at 00:35

score 8 · Answer 5 · answered Sep 26 '11 at 07:45

8

$(document).ready(function() {
    $('#abc_frame').attr('src',url);
})

answered Sep 26 '11 at 07:45

Jayendra

52,349
4
80
90

score 3 · Answer 6 · answered Mar 27 '15 at 07:58

3

<script type="text/javascript">
  document.write(
    "<iframe id='myframe' src='http://www.example.com/" + 
    window.location.search + "' height='100' width='100%' >"
  ) 
</script>

This code takes the url-parameters (?a=1&b=2) from the page containing the iframe and attaches them to the base url of the iframe. It works for my purposes.

answered Mar 27 '15 at 07:58

Arend

313
2
4

`document.write` is equivalent to using `eval()` - it's subject to script injection! Only use with extreme caution! – amphetamachine Dec 02 '19 at 17:20

score 1 · Answer 7 · edited Oct 23 '14 at 09:19

$(".excel").click(function () {
    var t = $(this).closest(".tblGrid").attr("id");
    window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t;
});

this is what i use, no jquery needed for this. in this particular scenario for each table i have with an excel export icon this forces the iframe attached to that table to load the same page with a variable in the Query String that the page looks for, and if found response writes out a stream with an excel mimetype and includes the data for that table.

score 1 · Answer 8 · answered Sep 26 '11 at 07:46

1

You cannot set FIX iframe's src or prevent javascript/form submit to change its location. However you can put script to onload of the page and change action of each dynamic link.

answered Sep 26 '11 at 07:46

Jan Pfeifer

2,854
25
35

jQuery Force set src attribute for iframe

8 Answers8

Linked