在 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() 函数的调用将以失败告终。