如何在ServiceNow的UI页面中正确引入客户端脚本？

你直接通过<script src="/sys_script_client.do?sys_id=123456"></script>引用客户端脚本的方式行不通，因为sys_script_client.do是ServiceNow里编辑客户端脚本的表单页面，返回的是HTML内容而非纯JavaScript代码，浏览器无法识别成脚本执行。

下面是几种可行的解决方案：

方案1：直接在UI页面的HTML中内嵌脚本 #

把你的逻辑直接写在UI页面的<script>标签里，建议放在页面底部（确保DOM元素加载完成后执行）：

<html>
<body>
<h1>The input attribute</h1>
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"/><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" disabled="disabled"/><br><br>
    
  <input type="submit" value="Submit"/>
  <a href="https://dev1234.service-now.com/x_1234_needlt_index2.do">link</a>
</form>
    
<p id="pid1">p1</p>
<button onclick="function1()">Click me</button>

<!-- 内嵌脚本 -->
<script>
function function1() {
  document.getElementById("pid1").innerHTML="p1 is changed by client script of same page";
}
</script>
</body>
</html>

方案2：使用UI页面自带的Client Script标签页 #

ServiceNow的UI页面自带专门的Client Script编辑区域，无需手动在HTML里引入脚本：

1. 打开你的UI页面，切换到Client Script标签
2. 直接写入脚本逻辑（支持定义函数或页面加载触发的代码）：

function function1() {
  document.getElementById("pid1").innerHTML="p1 is changed by client script of same page";
}

// 如需页面加载时自动执行，可添加：
addLoadEvent(function() {
  // 这里写页面加载完成后要执行的代码
});

这种方式下，ServiceNow会自动处理脚本的引入，无需额外添加<script>标签。

方案3：复用脚本（使用客户端可调用的Script Include） #

如果脚本需要在多个UI页面复用，可以创建客户端可访问的Script Include：

1. 创建Script Include，勾选Client callable选项
2. 定义脚本逻辑：

var MyClientUtils = Class.create();
MyClientUtils.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  updatePidText: function() {
    document.getElementById("pid1").innerHTML="p1 is changed by client script of same page";
  },
  type: 'MyClientUtils'
});

3. 在UI页面的脚本中调用：

function function1() {
  var utils = new MyClientUtils();
  utils.updatePidText();
}

内容的提问来源于stack exchange，提问作者Alok Kumar