2017-10-08 3 views
0

私は巨大なaspウェブサイトプロジェクトを持っていて、ポップアップのためにshowModalDialogから使用しています。数ヶ月前にmozillaが更新され、この機能に何らかの問題が発生しました。だから私はModalDialog polyfillを使って解決しました。しかし、最後のmozillaのアップデートでは、dialog.shoModal()機能はサポート外であり、私のポップアップは開かれていません。彼らはabout:configのdom.dialog_element.enabledプリファレンスを介してこのようなsolutionを有効にしましたが、それはユーザーを妨害します。dialog.showModalはMozilla Firefoxでサポートされていません

私はこれについてたくさん調べましたが、私のコードを置き換えるための解決策は見つかりませんでした。私のプロジェクトの巨大さのために、そのようなモーダルブートストラップを使うのはとても難しいです。ポップアップやモーダルには、保存するための戻り値やそのようなやりとりがあります。これに代わるものをご紹介ください。あるいは、私はこれのために新しいことを書く方法を手助けします。

ありがとうございました。

答えて

0

ダイアログpolyfill関数のいくつかの変更によってこの問題を解決しました。最終コード:

(function() { 
window.spawn = window.spawn || function (gen) { 
    function continuer(verb, arg) { 
     var result; 
     try { 
      result = generator[verb](arg); 
     } catch (err) { 
      return Promise.reject(err); 
     } 
     if (result.done) { 
      return result.value; 
     } else { 
      return Promise.resolve(result.value).then(onFulfilled, onRejected); 
     } 
    } 
    var generator = gen(); 
    var onFulfilled = continuer.bind(continuer, 'next'); 
    var onRejected = continuer.bind(continuer, 'throw'); 
    return onFulfilled(); 
}; 
window.showModalDialog = window.showModalDialog || function (url, arg, opt) { 
    url = url || ''; 
    arg = arg || null; 
    opt = opt || 'dialogWidth:300px;dialogHeight:200px'; 
    var caller = showModalDialog.caller.toString(); 
    var dialog = document.body.appendChild(document.createElement('dialog')); 
    dialog.setAttribute('style', opt.replace(/dialog/gi, '')); 
    dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>'; 
    document.getElementById('dialog-body').contentWindow.dialogArguments = arg; 
    document.getElementById('dialog-close').addEventListener('click', function (e) { 
     e.preventDefault(); 
     //dialog.close(); 
     var event = document.createEvent('Event'); 
     event.initEvent('myEvent', true, true); 
     dialog.dispatchEvent(event); 
    }); 

    try { 
     //dialog.showModal() 
     dialog.style.top = '50px'; 
     dialog.style.display = 'block'; 
     document.getElementsByTagName('body')[0].appendChild(dialog); 
    } 
    catch (err) { 
     alert(err); 
    } 

    //if using yield 
    if (caller.indexOf('yield') >= 0) { 
     return new Promise(function (resolve, reject) { 
      dialog.addEventListener('myEvent', function() { 
       var returnValue = document.getElementById('dialog-body').contentWindow.returnValue; 
       document.body.removeChild(dialog); 
       resolve(returnValue); 
      }); 
     }); 
    } 

     //if using eval 
     var isNext = false; 
     var nextStmts = caller.split('\n').filter(function (stmt) { 
      if (isNext || stmt.indexOf('showModalDialog(') >= 0) 
       return isNext = true; 
      return false; 
     }); 
     dialog.addEventListener('close', function() { 
      var returnValue = document.getElementById('dialog-body').contentWindow.returnValue; 
      document.body.removeChild(dialog); 
      nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue)); 
      eval('{\n' + nextStmts.join('\n')); 
     }); 
    throw 'Execution stopped until showModalDialog is closed'; 
}; 
})(); 
関連する問題