如何使用jQuery調整大小來調整iFrame中的元素大小？

我有一些問題，我目前正在參與一個項目。這是我的情況。我動態構建和渲染網頁的iframe，而我希望提供用戶調整該呈現的頁面中的div元素在iframe的能力。要設置的背景下，考慮下面的代碼片段：如何使用jQuery調整大小來調整iFrame中的元素大小？

主機頁面：

<html> 
<head></head> 
<body> 
<div id="container"> 
    <iframe id="site" src="proxy.php" style="width:100%;height:100%;"></iframe> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script> 
<script> 
    $("#site").load(function() { 

     $("#site").contents().find("#test-resize").resizable({ 
      create: function(event, ui) { 
       console.log("Create"); 
      }, 
      start: function(event, ui) { 
       console.log("Start"); 
      }, 
      resize: function(event, ui) { 
       console.log("Resize"); 
      } 
     }); 
    }); 
</script> 
</body> 
</html>

渲染頁面：

<html> 
<head> 
<style> 
    body { margin: 0; padding: 0; } 
    #container { width: 960px;margin: auto;border: 1px solid #999; } 
    header { display: block;background: #dedede;padding: 5px; } 
    footer { display: block;padding: 10px;background: #555;color: #eee; } 
    .ui-resizable { position: relative;} 
    .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} 
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
    .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 
    .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 
    .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 
    .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 
    .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 
    .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 
    .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 
    .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="main"> 
     <header> 
      <div><h1>Header</h1></div> 
     </header> 
    </div> 
    <div id="body"> 
     <h2>Body</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <p>Mauris et sapien ligula, sit amet tincidunt ligula.</p> 
    </div> 
    <footer> 
     <!-- I want the user to be able to resize this div --> 
     <div id="test-resize">Footer Div</div> 
    </footer> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script> 
</body> 
</html>

那麼，是什麼在主頁試圖做的是深入到所呈現的頁面並允許調整'test-resize'元素的大小。令我費解的是，可調整大小的插件找到'test-resize'元素，然後添加必要的resize處理div並觸發'create'事件。但是，當嘗試實際調整大小時，沒有任何反應。沒有任何變化，沒有事件發生。

就這樣，我的問題是，我怎麼能（如果有的話）伸進一個iframe和調整大小的元素？請注意，這兩個頁面位於同一個域中。

編輯：我想我應該澄清另一點。在將resize代碼添加到生成的頁面時，調整大小工作正常，但我希望將代碼保留在主機頁面級別。

來源

2011-04-14 naivedeveloper

好了，所以多一點挖後，我能夠拿出一個（遭最好）的解決方案。不幸的是，它涉及到實際修改jQuery UI。請注意，我沒有對此結果進行徹底分析，以確定性能（以及潛在的其他指標）的影響。但無論如何，爲了實現這個目標，有幾個地方需要改變。請注意，所有這些更改都發生在UI Mouse小部件中的事件中。第一個更改是在widget的綁定mousemove和mouseup事件時在_mouseDown事件中。變化：

$(document) 
    .bind('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
    .bind('mouseup.'+this.widgetName, this._mouseUpDelegate);

要：

$($(this.element).get(0).ownerDocument) 
    .bind('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
    .bind('mouseup.'+this.widgetName, this._mouseUpDelegate);

所以，這主要結合這些事件給業主的文件不管所有者文件是一個普通的舊的HTML頁面或iframe頁面。其次，當用戶放棄鼠標時，我們需要解除這些事件。在UI鼠標widget的_mouseUp事件，變化：

$(document) 
    .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
    .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);

要：

$($(this.element).get(0).ownerDocument) 
    .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
    .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);

剛剛解除綁定，我們在上面綁定的事件。最後，我們需要返回_mouseDown事件並做出最終更改。在這個函數的頂部，注意行：

// don't let more than one widget handle mouseStart 
if(mouseHandled) {return};

我們需要評論說出來或刪除。任意一個。之後，看起來我們可以在iframe之內和之外進行調整。無論這是否打破其他小部件或插件，idk。但是，讓希望不是。如果大家都能就潛在影響提供一些建議並希望提供更優雅的解決方案，我將不勝感激。謝謝。

來源

2011-06-02 19:50:26 naivedeveloper

太棒了！謝謝。 – 2012-07-18 09:24:10

我遵循這一點，我可調整大小的工作很好，但我的可拖動性是bug。任何建議在此工作？ – 2013-03-30 05:56:54

我建議從渲染頁面的運行調整大小。這是你的編輯器，並會消除父母和iframe之間的所有電話。我發現操縱其他窗口中的元素很複雜，並不總是最佳實踐。相反，我一直在限制窗口之間的交互以調用JavaScript函數。我發現這更好地劃分了我的代碼，並使其更容易移植到其他實例。

來源

2011-06-02 20:32:52 natedavisolds

感謝您的回覆。我知道這並不真正遵循最佳做法。我想保持兩個單獨的事實，即iframe將成爲最終將被導出爲HTML的生成頁面的代理，並且我不想通過「生成」生成的頁面增加了很多無意的JS和CSS。對此問題有任何建議/建議？ – naivedeveloper 2011-06-02 20:54:13

@naivedeveloper - 不完全確定你在做什麼，但我已經構建了與你所描述的類似的wysiwyg /頁面佈局插件。在那個插件中，我從文本區域獲取html並將其放置在iframe的正文中。我使用了iframe頁面來操縱它自己的頁面的主體（即允許li元素可排序，p標籤被編輯等）。在保存原始頁面時，我只將iframe頁面的主體拉回。因此，我避免了您提到的混淆html的問題。 – natedavisolds 2011-06-02 21:17:31

如何使用jQuery調整大小來調整iFrame中的元素大小？

回答

相關問題