程序员经验分享-hwhale

如何使用 jQuery resizing 调整 iFrame 内元素的大小？

2024-01-07

我目前参与的一个项目遇到了一些问题。这是我的情况。我正在动态构建网页并将其渲染到 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”元素的大小。我感到困惑的是，可调整大小的插件找到“test-resize”元素，然后添加必要的调整大小句柄 div 并触发“create”事件。然而，当尝试实际调整大小时，什么也没有发生。没有任何变化，也没有事件触发。

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

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


好吧，经过一番挖掘，我找到了一个（最多是破解的）解决方案。不幸的是，它实际上涉及修改 jQuery UI。请注意，我尚未对此结果进行彻底分析来确定性能（以及可能的其他指标）的影响。但无论如何，为了让它发挥作用，有几个地方需要改变。请注意，所有这些更改都发生在 UI 鼠标小部件的事件内。当小部件绑定 mousemove 和 mouseup 事件时，第一个更改发生在 _mouseDown 事件中。改变：

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

To:

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

因此，这基本上将这些事件绑定到所有者文档，无论所有者文档是常规的旧 HTML 页面还是 iframe 中的页面。其次，当用户松开鼠标时，我们需要解除这些事件的绑定。在 UI Mouse 小部件的 _mouseUp 事件中，更改：

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

To:

$($(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 内部和外部调整大小。无论这是否会破坏任何其他小部件或插件，我不知道。但我们希望不会。如果你们能够就这一潜在影响提供一些建议，并希望提供一个更优雅的解决方案，我将不胜感激。谢谢。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

resize

如何使用 jQuery resizing 调整 iFrame 内元素的大小？ 的相关文章

随机推荐

热门标签