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

【问题标题】：iframe can't be as wide as its jQuery dialog containeriframe 不能像它的 jQuery 对话框容器一样宽
【发布时间】：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 iframe

【解决方案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");

【讨论】：