showModalDialog, 使用 <dialog> 元素的window.showModalDialog polyfill

分享于 

4分钟阅读

GitHub

  繁體 雙語
window.showModalDialog polyfill using a element
  • 源代码名称:showModalDialog
  • 源代码网址:http://www.github.com/niutech/showModalDialog
  • showModalDialog源代码文档
  • showModalDialog源代码下载
  • Git URL:
    git://www.github.com/niutech/showModalDialog.git
    Git Clone代码到本地:
    git clone http://www.github.com/niutech/showModalDialog
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/niutech/showModalDialog
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    ShowModalDialog Polyfill

    这是使用模式 HTML5 <dialog> 元素和 ECMAScript 6生成器的window.showModalDialog() shim。 在最新的Google Chrome 中测试了它,并启用了Experimental实验 JavaScript chrome://flags/#enable-javascript-harmony 在最新的Mozilla Firefox 中,dom.dialog_element.enabled 偏好设置为 true in about:config。 在使用 showModalDialog 函数之前,只需包含以下HTML代码: <script src="showModalDialog.js"></script>

    如果对话文档与宿主文档位于同一台服务器上,则支持同时传递 window.dialogArgumentswindow.returnValue

    ShowModalDialog Polyfill使用 promise,生成器,yield 关键字和 spawn 函数,由 Jake Archibald。 如果不可以用,polyfill将使用 eval 和JSON作为回退,假设语句由新行分隔,showModalDialog 函数不嵌套在函数中。

    命令行语法

    spawn(function*() {
     //statements before showing a modal dialogvar returnValue =yieldwindow.showModalDialog( url [, arguments, options] );
     //statements after closing a modal dialog});

    或者:

    function() {
     //statements before showing a modal dialogvar returnValue =window.showModalDialog( url [, arguments, options] );
     //statements after closing a modal dialog});

    其中:

    • 指定要加载和显示的文档URL的字符串。
    • 参数 - 指定在显示文档时要使用的参数的变量;
    • 使用CSS或者以下分号分隔属性指定对话框样式的命令行选项- - 字符串: dialogHeight:??99?px;dialogLeft:??99?px;dialogTop:??99?px;dialogWidth:??99?px;

    在使用生成器时,showModalDialogspawn 函数都是承诺的,因这里可以使用它们的then 方法和 yield

    当使用 eval 回退时,showModalDialog 函数抛出异常以停止执行代码,直到模式关闭,然后将调用函数的剩余代码重新设置为一个异常。

    若要从 inside的关闭该对话框,请调用 parent.document.getElementsByTagName('dialog')[0].close(); 如果两个文档都具有相同的源。

    演示

    这里是一个现场演示。 在 Google Chrome 37 + 中工作最佳。 启用实验 JavaScript 标志只需要yield方法才能工作。

    许可证


    相关文章