解决【关于javascript调用ocx控件时提示：对象不支持“setUrl”属性或方法】

最新推荐文章于 2024-07-11 09:37:06 发布

编号0927

最新推荐文章于 2024-07-11 09:37:06 发布

阅读量1w

点赞数

分类专栏：开发问题解决集

本文链接：https://blog.csdn.net/rwlsh/article/details/80252454

版权

开发问题解决集专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因最近工作需要，要开发一款视频播放的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" οnclick="submit_info()">提交</button>
            <button id="clean_btn" type="button" class="btn" οnclick="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>