解決【關於javascript呼叫ocx控制元件時提示：物件不支援“setUrl”屬性或方法】
阿新 • • 發佈：2019-02-17
因最近工作需要，要開發一款視訊播放的ocx控制元件。但我是第一次開發ocx控制元件，遇到不少問題，走了不少彎路。現將所遇問題做個記錄，方便後來人檢視。
問題描述：
ocx控制元件中，新增一個名為“setUrl(BSTR url)”的ocx介面方法，以供瀏覽器js程式碼呼叫傳值給ocx。
然而在ie瀏覽器中呼叫ocx的setUrl方法時，提示：物件不支援“setUrl”屬性或方法
本以為修改ie瀏覽器的安全級別，將activex相關的部分全部修改為：啟用。然而問題還是無法解決。
問題解決：
於是檢查了自己寫的html程式碼，才發現問題所在。由於個人習慣，通常在js中獲取元素，喜歡用jquery的方式來寫：
var self_ocx = $("#cctv_ocx");
然而，就是我這種寫法，導致無法呼叫ocx的屬性方法。於是只有老老實實改為：
var self_ocx = document.getElementById("cctv_ocx");然後呼叫成功！！
下面貼上正確的html程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>視訊監控OCX測試</title> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style type="text/css"> .container { display: flex; align-items: center; flex-wrap: wrap; } #menu{ height:452px; width:200px; float:left; border:1px solid #000000; } #content{ background-color:#000000; height:452px; width:900px; float:left; border:1px solid #000000; } .container{ background-color:#CCE8CF; height:20%; width:100%; float:left; } #ok_btn{ height:30px; width:40%; float:left; vertical-align: middle; margin-left:15px; } #clean_btn{ height:30px; width:40%; float:right; vertical-align: middle; margin-left:10px; } p{ height:15px; width:20%; float:left; vertical-align: middle; } input[type=text]{ height:15px; width:80%; float:right; vertical-align: middle; line-height:100%; } body{ background-color:#CCE8CF; } </style> </head> <body> <div id="menu"> <div id="addr_div" class="container"> <p id="addr_txt">地址:</p> <input id="addr" value="10.130.210.105"/> </div> <div id="port_div" class="container"> <p id="port_txt">埠:</p> <input id="port" value="8011"/> </div> <div id="usr_div" class="container"> <p id="usr_txt">使用者:</p> <input id="usr" value="admin"/> </div> <div id="pwd_div" class="container"> <p id="pwd_txt">密碼:</p> <input id="pwd" value="123456"/> </div> <div id="btn_div" class="container"> <button id="ok_btn" type="button" class="btn" onclick="submit_info()">提交</button> <button id="clean_btn" type="button" class="btn" onclick="clean_info()">清除</button> </div> </div> <div id="content"> <object ID="cctv_ocx" classid="clsid:D8F1BB16-E1C5-4C1C-B716-17504C96603A" WIDTH=900 HEIGHT=450> </object> </div> <script type="text/javascript"> function submit_info() { var url = $("#addr").val(); var port = $("#port").val(); var usr = $("#usr").val(); var pwd = $("#pwd").val(); if(0==url.length||0==port.length|| 0==usr.length||0==pwd.length){ alert("info is empty."); return; } if (!!window.ActiveXObject) { alert("對不起，證書登陸請使用IE瀏覽器！"); return; } //var self_ocx = $("#cctv_ocx");不要使用這種方式獲取物件 var self_ocx = document.getElementById("cctv_ocx"); self_ocx.setUrl(url); } function clean_info() { $("#addr").val(""); $("#port").val(""); $("#usr").val(""); $("#pwd").val(""); } function show(debug) { console.log(debug); } </script> </body> </html>