在没有JQuery的情况下使用JavaScript调用github:davidjbradshaw / iframe-resizer?

时间:2014-07-11 19:09:44

标签: javascript iframe-resizer

我尝试使用https://github.com/davidjbradshaw/iframe-resizer iframe缩放器,示例(https://github.com/davidjbradshaw/iframe-resizer/tree/master/example)似乎基于JQuery。有没有人知道如何在不使用JQuery的情况下通过JavaScript调用它?是否需要正文加载或是否捕获iframe的onload事件?我对如何开始使用它感到困惑(调用它)。

编辑...为每个问题添加更多详细信息。

  1. 为什么呢?动态内容: 我需要我的iframe根据"更改"来动态调整其高度。 iframe中的内容。我尝试过多种解决方案,例如下面的解决方案,但他们没有" 完全" 100%的时间解决问题。他们只根据"第一页"设置大小。 iframe内容:

    <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. 现有文档/没有搞清楚: 我没有按照DavidBradshaw提供的关于如何执行此操作的现有文档:我尝试按如下方式添加此代码。但显然,这不是你怎么做的。

  3. 文件的正文是:

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

    脚本部分:

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

    同样在iframe中的被调用内容中,我有这行代码。我很确定这部分是正确的。

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

    提前感谢您的帮助。如果我看起来很密集或者是一个愚蠢的问题我很道歉但是我看到了示例原型:iFrameResize([{options}],[selector]);

    然而,你不需要&#34;事件&#34;触发该功能?看到我的代码,我使用onload事件,它不起作用。如果我设置iframe的ID以建立[selector]:

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

    并称之为:

        iFrameResize(,testframe);
    

    或者这个:

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

    它仍然无法运作。我没有任何选项,并希望将选项保留为默认选项。

2 个答案:

答案 0 :(得分:4)

你可以做任何一件事。

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

iFrameResize(null,"#testframe");

答案 1 :(得分:0)

你可以使用

iFrameResize(,'iframe#testframe');