使 IFrame 动态调整大小

发布于 2024-12-11 03:16:35 字数 698 浏览 0 评论 0原文

我有以下 HTML 页面，其中有三个 iframe。我想允许用户使用 Javascript 手动调整 iframe 的高度和宽度。

<body>
<table>
    <tr>
        <td colspan="2" id = "freebase_td">
        <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
    <tr>
        <td align="left" id = "wiki_td">
        <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe>
        </td>
        <td align="right" id = "imdb_td">
        <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
</table>
</body>

原文

I have the following HTML page in which I have three iframes. I would like to allow users to resize the height and width of the iframes manually using Javascript.

<body>
<table>
    <tr>
        <td colspan="2" id = "freebase_td">
        <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
    <tr>
        <td align="left" id = "wiki_td">
        <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe>
        </td>
        <td align="right" id = "imdb_td">
        <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
</table>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

未蓝澄海的烟 2024-12-18 03:16:35

你最好的选择是使用一个库来做到这一点，例如 jQueryUI Resizing - 有正确执行此操作会出现很多浏览器间的怪癖。特别是当您需要允许用户指定任意大小/调整大小时，可拖动调整大小手柄几乎总是允许用户调整元素大小的最直观方法。如果您只是调整 iframe 的大小，那么直接设置 iframe 的宽度/高度应该没问题，但这并不能以直观的方式从用户那里获取新的宽度/高度。

另请参阅使用 jQuery UI 调整 iFrame 大小 - 您需要将 iframe 包装在 div 中，将 iframe 设置为 height=100% width=100%，并调整 div 的大小。如果您将裸 iframe 设置为可拖动，则拖动调整大小将无法正常工作。（这是某些浏览器中的事件冒泡限制，而不是 jQuery 本身的错误。）

回复收藏 0 原文

与酒说心事 2024-12-18 03:16:35

在现代浏览器中你不需要 javascript。只是一点 html+css 的技巧。将您的 iframe 封装在启用了 resize 属性的 div 中。

<div>
  <iframe src="https://www.example.com/"></iframe>
</div>

<style>
div {
  overflow: hidden;
  resize: both;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
}
</style>

演示： https://jsfiddle.net/k53a41ej/

you don't need javascript for that in modern browsers. just a little html+css trick. encapsulate your iframe in a div with resize property enabled.

<div>
  <iframe src="https://www.example.com/"></iframe>
</div>

<style>
div {
  overflow: hidden;
  resize: both;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
}
</style>

demo: https://jsfiddle.net/k53a41ej/

回复收藏 0 原文

汐鸠 2024-12-18 03:16:35

我选择像诅咒一样避开 iFrame。我知道这不是您所要求的，但请查看 jQueryUI 的可调整大小。

如果您更改基础结构，您可能会发现这是一个更具可扩展性/长期的解决方案。

注意：可调整大小可以应用于任何 DOM 元素！

回复收藏 0 原文

‘画卷フ 2024-12-18 03:16:35

这不行吗？

document.getElementById('wiki_frame').style.width = '300px';

Does this not work?

document.getElementById('wiki_frame').style.width = '300px';

回复收藏 0 原文

蒗幽 2024-12-18 03:16:35

$(function(){
    $("table td").css({position:'relative'})
    $("div.resizer").appendTo($("table td")).each(function(){

     $(this).width(20);
     $(this).height(20);
     $(this).css({
          position:"absolute",
          top: $(this).parent().height() - 20,
          left: $(this).parent().width() - 20
     });
     var resize = false;
     var $td;
     var pos;
     $(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});});
      $(document).mousemove(function(e){

           if( resize ){
                  $td.height( $td.height() + e.pageY - pos.top );
                  $td.width( $td.width() + e.pageX- pos.left);
            }
       });
       $(document).mouseup(function(){

            resize = false;
      });
    });
})();

$(function(){
    $("table td").css({position:'relative'})
    $("div.resizer").appendTo($("table td")).each(function(){

     $(this).width(20);
     $(this).height(20);
     $(this).css({
          position:"absolute",
          top: $(this).parent().height() - 20,
          left: $(this).parent().width() - 20
     });
     var resize = false;
     var $td;
     var pos;
     $(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});});
      $(document).mousemove(function(e){

           if( resize ){
                  $td.height( $td.height() + e.pageY - pos.top );
                  $td.width( $td.width() + e.pageX- pos.left);
            }
       });
       $(document).mouseup(function(){

            resize = false;
      });
    });
})();

回复收藏 0 原文

~没有更多了~