iframe src中的JavaScript函数

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.

Answer 1

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>

Answer 2

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

Answer 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, ie change its src property.

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

Answer 4

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

May check this fiddle out

Answer 5

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.