javascript - 模态窗口内的 iFrame 在 Chrome 上不起作用

Question

这在 Firefox 上有效，但在 Chrome 上，我在“function onDialogOpen() { this.iframe.css({)”上收到“Uncaught TypeError: Cannot read property 'css' of null”错误。

  function show(options) {


    // create our temporary iframe
    this.iframe = $('<iframe name="' + (this.id = 'emh_' + +new Date) + '">')
      .load($.proxy(onIframeLoad, this));

    // show our dialog
    this.iframe.dialog($.extend(true, {
      title: 'Entity Viewer',
      modal: true,
      draggable: false,
      resizable: false,
      width: 800,
      height: 500,
      buttons: {
        'Save & Continue': $.proxy(submitIframeForm, this)
      },
      open: $.proxy(onDialogOpen, this),
      close: $.proxy(onDialogClose, this)
    }, options));  
    alert(options.path);
    // since our dialog is showing now, let's update the src of the iframe
    this.iframe.attr('src', options.path + '?modal=true&unique=' + this.id);


  }

function onDialogOpen() {
    this.iframe
      .css({
        width: '100%',
        padding: 0,
        border: 0,
        margin: 0
      });
}

Answer 1

不确定这是否可行，但我有两种方法:

1. 在您的 show 方法中移动 onDialogOpen:

    function show(options) {
   
    //your code
    //...
    //...  
    //this.iframe.attr('src', options.path + '?modal=true&unique=' + this.id);
   
   //no need to pass this parameter since method has same this as parent one
   
       function onDialogOpen() {
           this.iframe
             .css({
               width: '100%',
               padding: 0,
               border: 0,
               margin: 0
             });
       }
   

或

2。 - 在 IFrame 加载后立即创建此引用:

var _this = this;

• 修改此调用:

打开:$.proxy(function(){ onDialogOpen(_this)}, this)

更新 onDialogOpen:

function onDialogOpen(_this) {
    if (typeof _this != 'undefined')
{
 _this.iframe
      .css({
        width: '100%',
        padding: 0,
        border: 0,
        margin: 0
      });
}
else
{
    this.iframe
      .css({
        width: '100%',
        padding: 0,
        border: 0,
        margin: 0
      });
}
}