在 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 表。

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

WebViewerSource (使用全局存储)
姓名
等级
颜色

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

在基于 WebForm 的布局中，添加一个具有以下属性的 Web 查看器：

Web 地址 WebForm::WebViewerSource
选择了“允许与 Web 查看器内容交互”选项
选择了“允许 JavaScript 执行 FileMaker 脚本”选项
对象名称 Web 查看器

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

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

请参阅在布局上放置和删除字段。
在浏览模式下，添加一项记录。

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

在 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 的等级，可使用弹出的颜色选择器选择颜色，还有一个提交按钮。

在“脚本工作区”中，在 Web 查看器中创建一个名为“设置用户数据”的脚本:
复制
```
暂停/继续脚本 [ 持续时间(秒): .001 ]
在 Web 查看器中执行 JavaScript [ 对象名称:"Web 查看器" ; 
    函数名称:"setUserData" ; 
    参数:WebForm::Name, WebForm::Rating, WebForm::Color ]
```
请参阅创建并编辑脚本。

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

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

复制

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

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

在布局模式下，添加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() 函数的调用将以失败告终。