JavaScript function in iframe src

Question

I am new to JavaScript.

I have a javascript function which return me country name. Now I have to place this value in the src of iframe. My JavaScript function is as follows:

<script type="text/javascript">
var country = $("#SCountry").val();
function getCountry()
{
   var country = $("#SCountry").val();
   return country;

}
</script>

I am getting the country value but can't incorporate it in the src of iframe. My iframe src is as follows:

src='https://example.com/?country="javascript:getCountry()"'

It's not working.

where in the iFrame do you want it? any special div? how does the iFrame html look like? — Sergio, Jun 21 '13 at 06:50
i want the javascript function value in query string in src of iframe — Muhammad Maaz, Jun 21 '13 at 06:56
iFrame will get loaded only if all the dependent elements loaded (probably onload of body) fully. So check whether your getCountry() method is called and returning the correct value when iFrame gets loaded — Ayyappan Sekar, Jun 21 '13 at 06:57
@AyyappanSekar: I can already tell you that it doesn't since JavaScript is not evaluated in HTML attributes. — Felix Kling, Jun 21 '13 at 07:01

SarathSprakash · Answer 1 · 2013-06-21T07:06:58.523

3

This will set the source attribute value of the iframe

<script type="text/javascript">
 var country = $("#SCountry").val();
 document.getElementById("iframeid").setAttribute("src","https://domain.com/country="+country)
 </script>

edited Jun 21 '13 at 07:06

answered Jun 21 '13 at 06:58

SarathSprakash

4,614
2
19
35

score 3 · Answer 2 · answered Jun 21 '13 at 06:58

You cannot give javascript code in iframe src attribute directly.

Instead you can set src of iframe using Javascript like below

<iframe id="frame"></iframe>

<script>
    window.onload = function() {
        document.getElementById('frame').src = 'https://domain.com/?country=' + getCountry();
    }
</script>

In above approach we didn't set src attribute initially due to this IE will security warning. Better follow below approach

<iframe src='/images/spacer.png' onload="this.src = 'https://domain.com/?country=' + getCountry();"></iframe>

<!-- /images/spacer.png meant to be any file. Lesser size is better -->

Thankssss to all.Its done now using the following code; – Muhammad Maaz Jun 24 '13 at 07:13 — Muhammad Maaz, Jun 24 '13 at 07:13

score 3 · Answer 3 · answered Jun 21 '13 at 06:59

You cannot simply put JavaScript in an HTML attribute. It won't get evaluated. Instead you have to use JavaScript to manipulate the DOM element, i.e. change its src property.

<iframe id="myIframe" src=""></iframe>
<script>
    document.getElementById('myIframe').src = 
        'https://domain.com/?country=' + getCountry();
</script>

score 1 · Answer 4 · answered Jun 21 '13 at 07:01

1

$(function(jQuery){
 var aURL = $('#myIframe').attr( "src");
$('#myIframe').attr( "src",aURL+''+"Isreal"/*use getCountry() here*/);
});

May check this fiddle out

answered Jun 21 '13 at 07:01

Ishank

2,860
32
43

From the `javascript` tag info: *"Unless a tag for a framework/library is also included, a pure JavaScript answer is expected."* – Felix Kling Jun 21 '13 at 07:02

Sergio · Accepted Answer · 2013-06-27T07:37:07.177

You can reach the "content" of your iFrame like this (just be sure to give an ID to the iFrame) This is a pure JS solution:

document.getElementById("iframe_id").contentDocument.getElementById("destination_id").innerHTML = country ;

And your iFrame tag could look like:
<iframe src='https://domain.com/' id="iframe_id">``</iframe>

OR

with php:

JS:

`document.getElementById('iframe_id').src = 'https://domain.com/?country=' + country;`

PHP inside iframe:

$country = $_POST["country"];
echo $country; // this echo you can use where you want the result to show up.

JavaScript function in iframe src

5 Answers5

Linked