如何使用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中的元素大小？

回答

相关问题