CODEWITHSUNDEEP
javascriptiframeiframe-resizer
Michael Barber
Michael Barber

Reputation: 187

Calling the github:davidjbradshaw/iframe-resizer using JavaScript without JQuery?

I'm trying to use the https://github.com/davidjbradshaw/iframe-resizer iframe resizer and the example (https://github.com/davidjbradshaw/iframe-resizer/tree/master/example) seems to be based on JQuery. Does anyone know how to call this via JavaScript only without using JQuery? Does it need a body onload or do I capture the onload event of the iframe? I'm confused on how to start using it (Invoke it).

Edit...to add more details per questions.

  1. Why? Dynamic content: I need my iframe to dynamically adjust its height based on the "changing" content within the iframe. I've tried a number of solutions like the one below but they do not "entirely" solve the problem 100% of the time. They set the size only based on the "first page" of the iframe content:

    <script type="text/javascript">
<!--
//Credit for script: http://th.atguy.com/mycode/100_percent_iframe/
<script language="JavaScript">

function resize_iframe()
{

var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
    height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("glu").style.height=parseInt(height-
document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

//Instead of using this you can use: 
//  <BODY onresize="resize_iframe()">
//--></script>

  2. Existing Docs./Not figuring it out: I'm not following the existing documentation provided by DavidBradshaw on how to do this: I tried adding this code as follows. But apparently, that is NOT how you do it.

The body of the file is:

    <iframe src="http://www.domain.net/store20/StoreTop.aspx?StoreID=17" width="100%" scrolling="no" onload="iFrameResize()"></iframe>

The script portion:

    <script type="text/javascript" src="../src/iframeResizer.min.js"></script> 
    <script type="text/javascript">
    <!--
    <script language="JavaScript">
    iFrameResize(); 
    // this will resize the iframe every
    // time you change the size of the window.
    window.onresize=iFrameResize; 
    //Instead of using this you can use: 
    //  <BODY onresize="resize_iframe()">
    //--></script>

Also at the called content within the iframe, I have this line of code. I'm pretty sure this part is correct, though.

    <script type="text/javascript" src="../js/iframeResizer.min.js"></script>

Thanks in advance for the help. I apologize if I seem dense or its a stupid question but I see the example prototyped: iFrameResize([{options}],[selector]);

However, don't you need an "event" to trigger that function? See my code and I use the onload event and it doesn't work. If I set the ID of the iframe to establish a [selector]:

    <iframe id="testframe" src="http://www.domain.net/store20/StoreTop.aspx?StoreID=17" width="100%" scrolling="no" onload="iFrameResize()"></iframe>

and call it like:

    iFrameResize(,testframe);

or this:

    iFrameResize(,$("#testframe"));

It still doesn't work. I don't have any options and want to keep the options as default.

Upvotes: 2

Views: 3111

Answers (2)

David Bradshaw
David Bradshaw

Reputation: 13097

You can do either.

$("#testframe").iFrameResize();

or

iFrameResize(null,"#testframe");

Upvotes: 3

Jamshi Bp
Jamshi Bp

Reputation: 15

you can use

iFrameResize(,'iframe#testframe');

Upvotes: 0

Related Questions