2014-07-11 34 views
3

我試圖使用https://github.com/davidjbradshaw/iframe-resizer iframe resizer和示例(https://github.com/davidjbradshaw/iframe-resizer/tree/master/example)似乎基於JQuery。有沒有人知道如何通過JavaScript調用而不使用JQuery?它是否需要body加載或我是否捕獲iframe的onload事件?我很困惑如何開始使用它(調用它)。調用github:使用JavaScript而不使用JQuery的davidjbradshaw/iframe-resizer?

編輯...爲每個問題添加更多詳細信息。

  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. 現有Docs./Not計算出來: 我不繼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")); 

它仍然無法正常工作。我沒有任何選項,並希望將選項保留爲默認選項。

+2

,什麼是你的理由這樣做呢? (除了讓生活更難?) – Joseph

+0

該示例使用jQuery來執行DOM操作。你不需要它。 – Blender

+2

該文檔還顯示瞭如何在沒有jQuery的情況下使用它。 –

回答

3

您可以執行。

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

iFrameResize(null,"#testframe"); 
+0

從查看此頁面的次數以及我花費了多長時間來解決類似的混淆問題,我認爲這會對您有所幫助, noobs在你的頁面上,我們在那裏,我們想用你的ve很有幫助的JS包,但是你已經爲那些比我們知道得更多的人解釋了它。在搜索了幾個小時之後,我才找到了這個答案,然後才終於開始在SO上起草一個問題。我幾乎沒有使用JS,但我需要這個特殊的東西 - 我不知道如何編寫參數的約定,或者像這樣的腳本在頁面內調用。 –

+0

@kimholder您是否看到「入門」部分之後的典型示例?我剛剛更新了這個,包括在iFrame上設置一個ID並將其傳遞給iFrameResize()。 –

+0

是的,我看到了。增加是一個改進。但是 - 使用'var iframes = iFrameResize([{options}],[css selector] || [iframe])調用腳本,'' - 這個去哪裏以及它應該如何包裝?雙vbar之後的最後一個選項是什麼?語法的什麼部分僅僅是一個約定,用來表示'替代',方括號?我希望其他地方的一個頁面爲那些只想使用插件的人們解釋了這種情況,讓每個人都可以鏈接到noobs。另外