Question

我正在参与一个我目前正在参与的项目。这是我的情况。我正在动态构建并将网页呈现为iframe，并且我希望为用户提供在iframe中重新调整该呈现页面内的div元素的能力。要设置上下文，请考虑以下代码段：

主页：

<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'元素的大小。令我感到困惑的是，resizable插件找到'test-resize'元素，然后添加必要的resize句柄div并触发'create'事件。但是，在尝试实际调整大小时，没有任何反应。什么都没有改变，没有事件发生。

有了这个，我的问题是，我怎么能（如果有的话）进入iframe并调整元素大小？请注意，这两个页面位于同一个域中。

编辑：我想我应该澄清另一点。将调整大小代码添加到生成的页面时，调整大小可以正常工作，但我想将代码保持在主页级别。

Answer 1

好的，经过多一点挖掘后，我能够想出一个（最好的黑客入侵）解决方案。不幸的是，它涉及实际修改jQuery UI。请注意，我没有对此结果进行全面分析，以确定性能（以及可能的其他指标）含义。但无论如何，有一些需要改变的地方才能使其发挥作用。请注意，所有这些更改都发生在UI Mouse小部件的事件中。当小部件绑定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鼠标窗口小部件的_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。但是，希望不要。如果你们都能提供一些关于这种潜在影响的建议并希望提供更优雅的解决方案，我将不胜感激。感谢。

Answer 2

我建议从渲染页面运行resizable。它是您的编辑器，将消除父和iframe之间的所有调用。我发现从其他窗口操纵元素很复杂，并不总是最好的做法。相反，我一直在限制窗口之间的交互以调用javascript函数。我发现这可以更好地划分我的代码并使其更容易移植到其他实例。

如何使用jQuery可调整大小来调整iFrame中的元素大小？

2 个答案: