iframe不能像它的jQuery对话框那样宽

这是我的测试JavaScript,您可以重现问题:您将看到iframe宽度只是对话框宽度的一半左右 . 似乎jQuery将iframe宽度更改为'auto'而不是使用我指示的值 .

<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可以包含任何内容 .

回答(2)

2 years ago

以下是如何找到问题的原因,因为在没有所有依赖项的情况下,没有人可以使用您的代码重现问题 .

使用Firebug获取Firefox

http://getfirebug.com/

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

此外,您可以通过在代码中设置中断来调试JavaScript .

2 years ago

尝试使用此代码 . 希望它会对你有所帮助 .

$('#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");