iframe不能和它的jQuery对话框容器一样宽
这里是我的测试JavaScript，可以让您重现问题：您将看到iframe宽度仅为对话宽度的一半。 看来，jQuery将iframe宽度更改为“自动”，而不是使用我指出的值。
<html>
<head>
<link rel="stylesheet" href="./styles/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="./scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">var $E = {};
$E.modal = function(params) {
return new function(params) {
if (!params) {
params = {width: 400, height : 300};
}
var $obj = $("<div style='margin:0px;padding:0px;'></div>");
var self = this;
// parse json object to url query string
var generateQueryString = function(data) {
queryString = "";
for (var o in data) {
queryString = queryString + "&" + o + "=" + data[o];
}
return queryString.replace(/^&/,"?");
};
// function - resize
var resize = function(modal, frame) {
frame.attr({
width : modal.width() ,
height : modal.height()
});
};
this.frame = $(document.createElement("iframe"));
this.url = "";
this.modal = $obj;
/*
* url : required, String, iFrame - src,
* params : not required, json object, get args
*/
this.load = function(url, params) {
var queryString = generateQueryString(params);
var url = url + queryString;
this.frame.attr({
src : url
});
this.frame.dialog("open");
this.frame.css('border','3px solid red'); //in order to show iframe cant be as wide as its outer dialog container.
resize(this.modal, this.frame);
};
this.close = function() {
this.modal.dialog("close");
};
this.frame.appendTo($obj);
this.frame.dialog($.extend({
autoOpen : false,
modal : true,
draggable : true,
resizable : true,
resize : function() {
resize(self.modal, self.frame);
},
drag : function() {
resize(self.modal, self.frame);
}
}, params));
}(params);
};
// click link
$(function() {
$('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:''});
});
});
</script>
</head>
<body>
<ul>
<li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
<li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
<li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
</ul>
</body>
</html>
请注意，2.html可以包含任何内容。
下面是如何找到问题，因为没有人可以使用您的代码来重现问题，而没有所有的依赖关系。
使用Firebug获取Firefox
http://getfirebug.com/
您可以在浏览器中选择元素并获取该元素的所有CSS和HTML，然后更改这些值，以便找到问题所在。 这是用户界面开发的必要条件。
此外，您可以通过在代码中设置中断来调试JavaScript。
试试这个代码。 希望它能帮助你。
$('#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");