WinCC OA-JS-CTRL腳本與JS交互

本文轉載自查看原文 2020-06-04 13:17 810 西門子WinccOA

使用webview 控件的時候不免涉及到CTRL 與JS互相調用,這主要用到兩個函數

oaJsApi.toctrl()及webview.execJsFunction(),

其中oaJsApi.toctrl()為js 向ctrl 發送消息;

webview.execJsFunction()執行js中的某個函數

JS傳遞消息到CTRL

1)新建pnl 拖入測試用控件

依次拖入了 button textedit 和 webview 三個控件

2)新建jsctrl.html寫入以下測試代碼

<div style="width:100%;text-align:center;font-size:20px;font-weight:bold;">CTRL 與 JS 交互</div>
<!--建立按鈕01-->
<div style="width:100%;text-align:center;">
    <button id="btn01" style="font-size: 20px;background-color: #00dd1c">發送消息到01</button>
</div>
<!--建立按鈕02-->
<div style="width:100%;text-align:center;">
    <button id="btn02" style="font-size: 20px;background-color: #33aaff">發送消息到02</button>
</div>
<script>
    //使用jQuery綁定 按鈕1 觸發函數
    $("#btn01").click(function () {
        btn01();
    });
    //使用jQuery綁定 按鈕2 觸發函數
    $("#btn02").click(function () {
        btn02();
    });
    //按鈕1按下執行的的函數
    function btn01() {
        let params = {
            //命令參數 重要
            command:"btnClick01"
        };
        //關鍵代碼
        oaJsApi.toCtrl(params,{
            //成功打印 ctrl 返回的內容
            success: function(data) {console.log(data);},
            error: function(data) { console.error(data);}
        });
    }
    //按鈕2按下執行的的函數
    function btn02() {
        let params = {
            command:"btnClick02"
        };
        oaJsApi.toCtrl(params,{
            success: function(data) {console.log(data);},
            error: function(data) { console.error(data);}
        });
    }
</script>

3)編寫pnl的initialize事件將jsctrl.html片段加載到webview中

4)編寫webview 的messageReceiced事件

代碼如下

messageReceived(mapping params)
{
    switch(params.params.command)
  {
    case "btnClick01":
      {
        //將btnClick01 marked 填入到TEXT_EDIT1 中
        string textcontent = TEXT_EDIT1.text();
        textcontent+="btnClick01 marked\n";
        TEXT_EDIT1.text(textcontent);
        //回傳信息received btn01 給oaJsApi
        this.msgToJs(params, "received btn01");
        break;
      }
    case "btnClick02":
      {
        string textcontent = TEXT_EDIT1.text();
        textcontent+="btnClick02 marked\n";
        TEXT_EDIT1.text(textcontent);
        this.msgToJs(params, "received btn02");
        break;
      }
     default:
      break;
   }
}

5) 運行測試

可以看到HTML中的按鈕成功觸發了CTRL的動作並接收到CTRL 回傳的信息

CTRL 調用JS

使用CTRL 調用JS 就簡單了許多

1) jsctrl.html 新增代碼

<div style="width:100%;text-align:center;font-size:20px;font-weight:bold;">CTRL 與 JS 交互</div>
<!--建立按鈕01-->
<div style="width:100%;text-align:center;">
    <button id="btn01" style="font-size: 20px;background-color: #00dd1c">發送消息到01</button>
</div>
<!--建立按鈕02-->
<div style="width:100%;text-align:center;">
    <button id="btn02" style="font-size: 20px;background-color: #33aaff">發送消息到02</button>
</div>
<!--ewoFunction 操作此標簽-->
<div id="ewoFun" style="width:100%;text-align:center;font-size:20px;"></div>
<script>
    //使用jQuery綁定 按鈕1 觸發函數
    ....省略...
    //按鈕2按下執行的的函數
    function btn02() {
        let params = {
            command:"btnClick02"
        };
        oaJsApi.toCtrl(params,{
            success: function(data) {console.log(data);},
            error: function(data) { console.error(data);}
        });
}
//供CTRL 調用
function ewoFunction(param01,param02){
   $("#ewoFun").append("<span>"+param01+param02+"</span>"+"</br>");
}

</script>