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
– Sergio, Commented Jun 21, 2013 at 6:50
i want the javascript function value in query string in src of iframe — Muhammad Maaz
– Muhammad Maaz, Commented Jun 21, 2013 at 6: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
– Ayyappan Sekar, Commented Jun 21, 2013 at 6:57
@AyyappanSekar: I can already tell you that it doesn't since JavaScript is not evaluated in HTML attributes. — Felix Kling
– Felix Kling, Commented Jun 21, 2013 at 7:01

M.G.Manikandan · Accepted Answer · 2013-06-21 06:58:38Z

4

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

answered Jun 21, 2013 at 6:58

M.G.Manikandan

9935 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Maaz Over a year ago

Thankssss to all.Its done now using the following code;<iframe id="frame"></iframe> <script> window.onload = function() { document.getElementById('frame').src = 'domain.com/?country=' + getCountry(); } </script>

Felix Kling · Accepted Answer · 2013-06-21 06:59:43Z

3

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>

answered Jun 21, 2013 at 6:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

SarathSprakash · Accepted Answer · 2013-06-21 07:06:58Z

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, 2013 at 7:06

answered Jun 21, 2013 at 6:58

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Comments

Sergio · Accepted Answer · 2013-06-27 07:37:07Z

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.

Ishank · Accepted Answer · 2013-06-21 07:01:10Z

0

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

May check this fiddle out

answered Jun 21, 2013 at 7:01

Ishank

2,92634 silver badges43 bronze badges

1 Comment

Felix Kling Over a year ago

From the javascript tag info: "Unless a tag for a framework/library is also included, a pure JavaScript answer is expected."

Collectives™ on Stack Overflow

JavaScript function in iframe src

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Related