change iframe width and height using javascript

Question

how cai i change width and height on iframe is src link ? using javascript code below i am able to change width and height of iframe but when there is iframe like this

<iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe>

<button onclick="myFunction()">Change</button>

how do i change width and height here page.php?width=400&height=400 ? is it possible using javascript ?

here's my javascript code to change width and height of iframe

<script>
function myFunction() {
    document.getElementById("myFrame").height = "400";
    document.getElementById("myFrame").width = "400";
}
</script>

Answer 1

You can do it like this:

function myFunction() {
    $("iframe").width(678);
    $("iframe").height(526);
}

or you want to do using id then like this :

function myFunction() {
    $("#myFrame").width(678);
    $("#myFrame").height(526);
}

If you have 2 iframe and you only want to apply to 1st then like this:

<script type="text/javascript">
    function myFunction() {
        $("iframe:eq(1)").width(678);
        $("iframe:eq(1)").height(526);
    }
</script>

**EDIT:**You can update uour src of iframe using .attr

function myFunction() {
        $("#myFrame").width(678);
        $("#myFrame").height(526);
        $("#myFrame").attr('src','http://domain.com/page.php?width=678&height=526');
    }

Answer 2

Try

var url =document.getElementById("myFrame").getAttribute("src");
var newUrl = url.substring(0,url.indexOf("width")) + "width=500&height=500";
document.getElementById("myFrame").setAttribute("src",newUrl);