如何使用可调整大小的jQuery在iFrame中调整元素的大小? [英] How to resize elements inside iFrame with jQuery resizable?
问题描述
我目前参与的一个项目有一些问题.这是我的情况.我正在动态构建网页并将其呈现到iframe，并且希望向用户提供在iframe中调整该呈现页面内的div元素大小的功能.要设置上下文，请考虑以下片段:
I'm having some problems with a project I'm currently involved with. Here is my situation. I am dynamically building and rendering a web page to an iframe, and I am wanting to offer the user the ability to resize the div elements within that rendered page in the iframe. To setup the context, consider the following snippets:
主机页面:
<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"元素，然后添加了必要的调整大小句柄div并触发了"create"事件.但是，在尝试实际调整大小时，没有任何反应.没有任何变化，也没有事件触发.
So, what the host page is trying to do is reach into the rendered page and allow the 'test-resize' element to be resized. What I find puzzling is that the resizable plugin finds the 'test-resize' element and then adds the necessary resize handle divs and fires the 'create' event. However, when attempting to actually resize, nothing happens. Nothing changes, and no event fires.
有了这个，我的问题是，如何(如果有的话)进入iframe并调整元素的大小?请注意，这两个页面在同一个域中.
With that, my question is, how can I (if at all) reach into an iframe and resize an element? Please note that these two pages are on the same domain.
我想我应该澄清另外一点.将调整大小代码添加到生成的页面时，调整大小可以正常工作，但是我想将代码保留在宿主页面级别.
I guess I should clarify another point. When adding the resize code to the generated page, the resize works fine, but I was wanting to keep the code at the host page level.
推荐答案
好的，因此，在进行了更多挖掘之后，我提出了一个(最多被黑客入侵)的解决方案.不幸的是，它实际上涉及修改jQuery UI.请注意，我尚未对此结果进行彻底的分析来确定对性能(以及其他潜在指标)的影响.但是无论如何，为了使它起作用，需要更改几个位置.请注意，所有这些更改都是在UI Mouse小部件中的事件内发生的.当窗口小部件绑定mousemove和mouseup事件时，第一个更改是在_mouseDown事件中.更改:
Okay, so after a little more digging, I was able to come up with a (hacked at best) solution. Unfortunately, it involves actually modifying jQuery UI. Note that I haven't performed a thorough analysis of this result to determine what the performance (and potentially other metrics) implications are. But at any rate, there are a couple of spots that need to be changed in order to get this to work. Please note that all these changes are happening within events in the UI Mouse widget. The first change is in the _mouseDown event when the widget is binding the mousemove and mouseup events. Change:
$(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鼠标"小部件的_mouseUp事件中，更改:
So, this basically binds these events to the owner document regardless if the owner document is a regular old HTML page or a page in an iframe. Second, we need to unbind these events when the user lets up off the mouse. In the UI Mouse widget's _mouseUp event, change:
$(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事件并进行最终更改.在此功能的顶部，请注意以下行:
Just unbinding the events that we bound above. Finally, we need to go back to the _mouseDown event and make a final change. At the top of this function, notice the line:
// don't let more than one widget handle mouseStart
if(mouseHandled) {return};
我们需要对此进行评论或将其删除.任意一个.之后，看来我们可以在iframe的内部和外部具有可调整大小的功能.这是否破坏了其他任何窗口小部件或插件，idk.但不要希望.如果大家都可以就此的潜在影响提出一些建议，并希望能提供一个更优雅的解决方案，我将不胜感激.谢谢.
We need to comment that out or delete it. Either one. After that, it appears that we can have resizability from within the and outside the iframe. Whether or not this breaks any other widgets or plugins, idk. But lets hope not. I would appreciate it if you all could offer some advice over potential effects of this and hopefully offer a more elegant solution. Thanks.
这篇关于如何使用可调整大小的jQuery在iFrame中调整元素的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
