Develop Reference

Button inside iframe click functionality changes height of that parent iframe(cross domain)

on click change in height to 500px;
<iframe src="test.html" frameborder="0" scrolling="no" id="myIframe" class="chat-box width-350" style="height:300px;"></iframe>
iframe height is set to 300px
test.html
button
when clicking on "clickhere" will change in height of iframe.

JQuery:
$('.clickhere').click(function() {
$('#myIframe').css("height","500px");
}

Try this
for test.html
button
<script type="text/javascript">
var parentIframe = window.parent.document.getElementById('myIframe');
var clickButton = document.getElementsByClassName('clickhere')[0];
clickButton.addEventListener("click", function(){
parentIframe.style.height = '500px';
console.log(parentIframe);
});
</script>

while using iframe its width and height doesn't refreshes on runtime

I am using iframe for targeting my URL . Issue is when i open a page whose content is large it stores its height and width and doesn't changes when i open a page whose page content is small. Is there any other way for targeting my URL other than iframe. Here is my Java script :
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
and here is my html Code :
<div class="row">
<iframe width="100%" seamless="seamless" height="100px" scrolling="no" style="margin-right:300px background: #FFFFFF;border:none" id="iframe1" name="NewFrame1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
</div><!-- /.row (main row) -->
Any Help would be appreciated. Thanks

100% auto height on iframe

I have an iframe on my page, i am using this code:
<script>
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="link.php" frameborder="0" width="100%" height="100%" onload='javascript:autoResizeiFrame(this);'></iframe>
which automatically resizes the iframe to 100% height.
This works fine, however if the browser is re-sized, making the screen width smaller i can see the iframe borders and it does not automatically re-size the height of the iframe.
It's only re-sizing it on page load

Hi you should use the resize event:
I have updated the solution:
If I understand correctly you wont the content of the iframe to not scroll and allays display in full .... than this will work... (i hope...)
<script type="text/javascript">
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load",function(){
var obj=document.getElementById("myIframe");
obj.contentWindow.addEventListener("resize",function(){autoResizeiFrame(obj);},false);
autoResizeiFrame(obj);
},false);
</script>
<iframe id="myIframe" src="index.php" frameborder="3" width="100%" height="100%" style="border:2px solid red;"></iframe>
Let me know.

You have to implement the onresize event on your page. See this link. W3School
window.addEventListener("resize", autoResizeiFrame(document.getElementById("myframe")));

Loading of an iframe after another

I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>

You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});

You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});

I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()

iframe not resizing to content height

I have been trying to get this to work for a while but to no avail. ive tried various scripts but im clearly doing something wrong :(
I have a menu on the left of the page, which contain (same server) href links of which their target is an iframe on the right of the page.
it sends the page to the iframe fine, but the iframe height does not change.
Can someone please assist me :(
here is my code:
html
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(viewcontent);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
.... menu link
<div class="menuOut" onMouseOver="this.className='menuIn'" onMouseOut="this.className='menuOut'">
- Forum Adverts </div>
.... iframe html
<div id=maincontain>
<iframe id="viewcontent" frameborder="0">
</iframe>
</div>
CSS
#maincontain {
width: 85%;
float: none;
margin-left: 12%;
}
#viewcontent {
width: 100%;
padding-top: 15px;
float: none;
}
The iframe just stays about 300px height unless I specify a bigger height manually.
the pages being loaded in, all have 800px+ heights.
Thanks.

The iframes' height is not influenced by the content. That's how iframes work.
If you need to shrink or grow them, you need to do that manually. Read more here:
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/

Have you tried JQuery?
You could use:
$("#viewcontent").height($("#viewcontent").contents().find("html").height());
And just call that on whatever event you want the iframe to resize on. I've got it working on keyup for one of my own projects. Here's the jsFiddle.

Please try the below script:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="test.html" width="100%" height="200px" id="my_frame" marginheight="0" frameborder="0" onLoad="autoResize('my_frame');"></iframe>
you Should have the source file with in your domain.this is already discussed
Click here
for Cross Domain iframe Resizing please
Click here