iframe不能像它的jQuery對話框容器一樣寬

下面是我爲您重現問題的測試JavaScript：您將看到iframe寬度僅爲對話寬度的一半左右。看來，jQuery將iframe寬度更改爲「自動」，而不是使用我指出的值。iframe不能像它的jQuery對話框容器一樣寬

 
<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可以包含任何東西。

來源

2010-03-04 Matt

下面是如何找到問題，因爲沒有人可以使用您的代碼來重現問題，而不具有所有的依賴關係。

獲得火狐Firebug的

http://getfirebug.com/

您可以選擇在瀏覽器中的元素，並得到所有的CSS和HTML該元素的然後改變這些值，這樣就可以找到問題所在。這是用戶界面開發的必要條件。

另外，您可以通過在代碼中設置中斷來調試JavaScript。

來源

2010-03-04 18:16:01

謝謝，我認爲依賴是相當容易的，他們是jQuery的lib文件。我確實使用Firebug來調查jquery生成的css，發現iframe的寬度是'auto'，而不是通過resize（）方法設置的值。 – Matt 2010-03-05 05:54:42

使用此代碼嘗試。希望它能幫助你。

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

來源

2012-12-26 09:25:23 Sush

iframe不能像它的jQuery對話框容器一樣寬

回答

相關問題