在 Web 查看器中使用 JavaScript 编写脚本

您可以在 Web 查看器中使用 JavaScript 执行操作 — 例如,创建自己的用户界面控件,或使用第三方 JavaScript 库显示交互式日历或绘制图表。您还可以在 Web 查看器中使用 JavaScript 与 FileMaker 脚本相互调用,并在它们之间传递信息。例如,当用户在 Web 查看器中的交互式日历中创建事件时,JavaScript 可以调用 FileMaker 脚本为每个事件创建记录。

从 Web 查看器中的 JavaScript 到 FileMaker 脚本

当 Web 查看器完成对网页的加载之后,JavaScript 可以调用以下函数之一以运行当前文件中的 FileMaker 脚本:

复制
FileMaker.PerformScriptWithOption ( 脚本, 参数, 选项 );

// 选项 = "0" 时的操作与上述相同。
FileMaker.PerformScript ( 脚本, 参数 );

其中

  • 脚本是包含 FileMaker 脚本名称的字符串(名称不区分大小写)

  • 参数是可由 JavaScript 传递给 FileMaker 脚本的可选字符串,该脚本可以使用 Get (脚本参数)函数获取该字符串

  • 选项是 FileMaker.PerformScriptWithOption() 函数中的可选参数,用于控制如何处理当前运行的 FileMaker 脚本(请参阅新建脚本情况下处理当前脚本的选项

例如,调用 FileMaker 脚本的 JavaScript 函数如下所示:

复制
function performFileMakerScript() {
    FileMaker.PerformScriptWithOption ( "FileMaker 脚本名称", "可选参数", "3" );
}

FileMaker.PerformScriptWithOption() 函数是异步运行的,因为它并不会等待 FileMaker 脚本完成。因此,FileMaker 脚本不会向调用它的 FileMaker.PerformScriptWithOption() 函数返回值。

在 FileMaker.PerformScriptWithOption() 函数执行时,FileMaker 脚本在当前上下文中运行。因此,如果上下文在开始执行 JavaScript 之后但在调用 FileMaker.PerformScriptWithOption() 函数之前发生更改,则 FileMaker 脚本将在新的上下文中运行。例如,在某些情况下,用户或脚本可以同时导航到其他布局或记录。为了应对这种可能性,FileMaker.PerformScriptWithOption() 函数可以使用可选参数来传递上下文信息,例如布局以及 FileMaker 脚本应当操作的记录的记录 ID 或主键。

从 FileMaker 脚本到 Web 查看器中的 JavaScript

在 FileMaker 脚本中,“在 Web 查看器中执行 JavaScript”脚本步骤可以调用 JavaScript 函数并向其传递可选参数。请参阅在 Web 查看器中执行 JavaScript 脚本步骤

示例

此示例显示了如何在 Web 查看器中创建简单的用户界面元素,将其值设置为 FileMaker 表中存储的值,允许用户在 Web 查看器中更改值以及将新值提交回 FileMaker 表。

  1. 使用这些文本字段创建一个名为 WebForm 的表:

    • WebViewerSource (使用全局存储)

    • 姓名

    • 等级

    • 颜色

    请参阅定义数据库表定义和更改字段

  2. 在基于 WebForm 的布局中,添加一个具有以下属性的 Web 查看器:

    • Web 地址 WebForm::WebViewerSource

    • 选择了“允许与 Web 查看器内容交互”选项

    • 选择了“允许 JavaScript 执行 FileMaker 脚本”选项

    • 对象名称 Web 查看器

    请参阅在布局上使用 Web 查看器命名对象

  3. 在同一布局上,为步骤 1 中的各个字段添加一个字段对象。

    请参阅在布局上放置和删除字段

  4. 在浏览模式下,添加一项记录。

    请参阅添加、复制和删除记录

  5. 在 WebForm::WebViewerSource 字段中,输入以下数据 URL:

    复制
    data:text/html,
    <html>
        <head>
            <style>
                div { padding-bottom:0.5em; }
            </style>
        </head>

        <body>
            <div>
                <label for="name">Name:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">Rating:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Favorite color:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">Submit</button>
        </body>

        <script>
            function submitForm() {
                var name = document.getElementById("name").value;
                var rating = document.getElementById("rating").value; 
                var color = document.getElementById("color").value;
                var param = name + '\n' + rating + '\n' + color;
                FileMaker.PerformScriptWithOption(
                    "Store Data from Web Form", param, "0"
                ); 
            }

            function setUserData(name, rating, color) {
                document.getElementById("name").value = name; 
                document.getElementById("rating").value = rating; 
                document.getElementById("color").value = color;
            } 
        </script>
    </html>

    在显示时,此数据 URL 提供 Web 查看器加载的 HTML 和 JavaScript。该网页显示一个简单的表单,有一个包含名称的文本字段,可使用滑块选择从 0 到 10 的等级,可使用弹出的颜色选择器选择颜色,还有一个提交按钮。

  6. 在“脚本工作区”中,在 Web 查看器中创建一个名为“设置用户数据”的脚本:

    复制
    暂停/继续脚本 [ 持续时间(秒): .001 ]
    在 Web 查看器中执行 JavaScript [ 对象名称:"Web 查看器" ; 
        函数名称:"setUserData" ; 
        参数:WebForm::Name, WebForm::Rating, WebForm::Color ]

    请参阅创建并编辑脚本

    在 FileMaker WebDirect 中,短暂的停顿让 Web 查看器能够在 Web 查看器中调用 setUserData JavaScript 函数之前,有时间完成对网页的加载。要在状态工具栏中隐藏“脚本已暂停”消息,可以使用“显示/隐藏工具栏”脚本步骤。

  7. 创建一个名为“通过 Web 表单存储数据”的脚本:

    复制
    设置变量 [ $jsParameters ; 值: Get (脚本参数) ]
    设置字段 [ WebForm::Name ; GetValue ($jsParameters ; 1) ]
    设置字段 [ WebForm::Rating ; GetValue ($jsParameters ; 2) ]
    设置字段 [ WebForm::Color ; GetValue ($jsParameters ; 3) ]

    当用户单击 Web 查看器中的“提交”按钮时,Web 表单中设置的值将存储在 WebForm 表的字段中。

  8. 在布局模式下,添加OnRecordLoad OnRecordCommit 脚本触发器,它们将运行步骤 6 中的“在 Web 查看器中设置用户数据”脚本,以在字段数据更改时更新 Web 查看器。

    请参阅定义或更改按钮设置布局的脚本触发器

在浏览模式下,通过在 Web 表单中设置值并单击“提交”来尝试示例。现在,“名称”、“等级”和“颜色”字段中的值应当与您在 Web 表单中设置的值相匹配。或者,在提交记录后,Web 查看器中应当显示对字段数据的更改。

注释 

  • 在设置 Web 查看器执行 FileMaker 脚本时,您必须选择“允许 JavaScript 执行 FileMaker 脚本”选项。请参阅在布局上使用 Web 查看器。出于安全考虑,如果未选择此选项,则调用 FileMaker.PerformScriptWithOption() 函数不会执行任何操作。

  • 由于 FileMaker WebDirect 出于安全性的原因受 Web 浏览器中的同源政策的约束,因此 Web 浏览器中的 JavaScript 以及 FileMaker 脚本只有在 Web 查看器的网页与 FileMaker WebDirect 网页具有相同来源时才能相互调用。(网页的来源是其 URL 方案、主机名和端口。)

  • 在 FileMaker WebDirect 中,为 Web 查看器指定的 HTML 必须以“data:text/html,”开头,如上例所示。否则,对 FileMaker.PerformScriptWithOption() 函数的调用将以失败告终。