iframe 不能像它的 jQuery 对话框容器一样宽

Posted 2023-02-27

【中文标题】iframe 不能像它的 jQuery 对话框容器一样宽

【英文标题】：iframe can't be as wide as its jQuery dialog container

【发布时间】：2011-01-23 17:50:39

【问题描述】：

这是我的测试 javascript 让您重现问题： 您将看到 iframe 宽度大约是对话框宽度的一半。似乎 jQuery 将 iframe 宽度更改为“自动”，而不是使用我指定的值。

"); 变种自我=这个； // 将 json 对象解析为 url 查询字符串 var generateQueryString = 函数（数据） 查询字符串 = ""; for (var o in data) queryString = queryString + "&" + o + "=" + data[o]; return queryString.replace(/^&/,"?"); ; // 函数 - 调整大小 var resize = 函数（模态，框架） 帧属性（ 宽度： modal.width() ， 高度：modal.height() ); ; this.frame = $(document.createElement("iframe")); 这个.url = ""; this.modal = $obj; /* * url：必需，字符串，iFrame - src， * 参数：不需要，json 对象，获取参数 */ this.load = 函数（网址，参数） var queryString = generateQueryString(params); var url = url + 查询字符串； this.frame.attr( 来源：网址 ); this.frame.dialog("打开"); this.frame.css('border','3px 纯红色'); //为了显示 iframe 不能与其外部对话框容器一样宽。 调整大小（this.modal，this.frame）； ; this.close = 函数（） this.modal.dialog("关闭"); ; this.frame.appendTo($obj); this.frame.dialog($.extend( 自动打开：假， 模态：真， 可拖动：真， 可调整大小：真， 调整大小：函数（） 调整大小（self.modal，self.frame）； , 拖动：函数（） 调整大小（self.modal，self.frame）； ，参数））； (参数); ; // 点击链接 $（函数（） $('a').click(function(e) e.preventDefault(); var $this = $(this); $E.modal(width:540,height:400).load("2.html", s_in_bank_key:'',s_in_acct_num:''); ); ); 脚本> 谷歌 jQuery jQuery UI 正文>

【参考方案1】：

这里是找到问题的方法，因为没有所有依赖项，没有人可以使用您的代码重现问题。

使用 Firebug 获取 Firefox

http://getfirebug.com/

您可以在浏览器中选择元素并获取该元素的所有 CSS 和 HTML，然后更改这些值以便找出问题所在。这是 UI 开发的必备条件。

此外，您还可以通过在实时代码中设置中断来调试 JavaScript。

【讨论】：

谢谢，我认为依赖关系很简单，它们是 jQuery lib 文件。我确实使用Firebug调查了jquery生成的css，发现iframe宽度是'auto'，而不是应该通过resize（）方法设置值。

【参考方案2】：

试试这个代码。希望对你有帮助。

  $('#example').dialog(
        autoOpen: false,
        height:300,
        open: function()  $('#example iframe').height($(this).height()+60); $
('#example iframe').width($(this).width()-10); ,
        resize: function()  $('iframe').hide(); ,
        resizeStop: function()  $('iframe').show(); $('#example
iframe').height($(this).height()-70);  $('#example iframe').width($
(this).width()-40); 
);

$('#example').dialog("open");