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

【问题标题】：Calling the github:davidjbradshaw/iframe-resizer using JavaScript without JQuery?在没有 JQuery 的情况下使用 JavaScript 调用 github:davidjbradshaw/iframe-resizer？
【发布时间】：2014-07-11 19:09:44
【问题描述】：

我正在尝试使用https://github.com/davidjbradshaw/iframe-resizer iframe 调整大小，示例 (https://github.com/davidjbradshaw/iframe-resizer/tree/master/example) 似乎基于 JQuery。有谁知道如何在不使用 JQuery 的情况下仅通过 JavaScript 调用它？它需要正文 onload 还是我捕获 iframe 的 onload 事件？我对如何开始使用它感到困惑（调用它）。

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

为什么？动态内容：我需要我的 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>

现有文档。/未弄清楚：我没有遵循 DavidBradshaw 提供的有关如何执行此操作的现有文档：我尝试按如下方式添加此代码。但显然，这不是你的做法。

文件的正文是：

    <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]);

但是，您不需要“事件”来触发该功能吗？查看我的代码，我使用了 onload 事件，但它不起作用。如果我设置iframe的ID来建立一个[选择器]：

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

然后这样称呼它：

    iFrameResize(,testframe);

或者这个：

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

还是不行。我没有任何选项，并希望将选项保留为默认值。

【问题讨论】：

您这样做的原因是什么？（除了让生活更艰难？）
示例使用jQuery做DOM操作。你不需要它。
文档还展示了如何在没有 jquery 的情况下使用它。'
直接从你链接到的 Github 页面："可以用原生 JavaScript 调用：iFrameResize([{options}],[selector]);"...
是的，我在文档中看到了这一点，而且在没有“直接示例”的情况下，他在谈论什么对我来说并不明显。我没有任何选择，正在尝试使用默认值。我的代码正在调用 iFrameResize([no options], 作为 ME 直接从 onload 调用); 我也可以给 iframe 一个 id=testframe [selector] 并像它似乎推断一样调用它。iFrameResize(,testframe); 那是我的问题。我我没有看到如何将“原型”转化为现实。他在实践中给出了原型但没有给出原型。JQuery 是原型和示例。

标签： javascript iframe iframe-resizer

【解决方案1】：

你可以做任何一个。

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

或

iFrameResize(null,"#testframe");

【讨论】：

从这个页面被浏览的次数，以及我花了多长时间试图解决类似的困惑，我认为如果你在你的页面上放置关于新手的说明会很有帮助。我们在那里，我们想使用您非常有用的 JS 包，但是您已经为比我们了解更多的人解释了它。我在搜索了几个小时后才找到了这个答案，并且只是在最终开始在 SO 上起草一个问题之后。我几乎不使用 JS，但我需要它来完成一件特殊的事情——我不知道如何编写参数的约定，或者在页面中调用这样的脚本。
@kimholder 您是否在入门部分之后直接看到了典型示例？我刚刚更新了这个，包括在 iFrame 上设置一个 ID 并将它传递给 iFrameResize()。
是的，我看到了。添加是一种改进。但是 - 使用var iframes = iFrameResize( [{options}], [css selector] || [iframe] ); 调用脚本 - 它去哪里以及应该如何包装？在双 vbar 之后的最后一个选项中有什么？语法的哪一部分只是说“在此处替换”的约定，方括号？我希望其他地方的页面为那些只想使用插件的人解释这种事情，让每个人都可以链接到新手。
[] 表示可选，||意思是“或”。这些是非常常见的约定。 “iframe”位意味着您可以传递 iFrame 的对象引用，如果这没有意义，那么您就不需要它。我认为 90%! 的人只需要典型的例子，也许应该首先出现。是的，风格位确实应该在头脑中，但要尽量保持小。我真的希望将其放置在 CSS 文件中。

【解决方案2】：

你可以使用

iFrameResize(,'iframe#testframe');

【讨论】：