调用JS的方式很简单,只需要一句代码即可:
举个栗子:
当然,也可以用这个方法来调用我们自己写的JS函数:
JS代码:
function e_1 () {
alert('你成功调用了我');
}
易语言代码为:
由此可知,wke.运行JS('参数') 的参数可以调用HTML页面中所有相关的JS代码以及我们所写的JS函数。
HTML部分:
这部分主要是设置对应元素的ID,这次主要演示的是ID为 input_1 的 input 标签
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
html,body{margin:0px;padding:0px}
.windows{background-color:#e1e1e1;width:100%;height:100%;position:absolute;box-sizing:border-box;padding:60px}
.title_black{width:100%;height:30px;background-color:#fff;line-height:30px;padding:0px 20px;box-sizing:border-box;}
.div_item{width:100%}
.div_item>p{width:100px;display:inline-block}
.div_item>input{width:60%;display:inline-block}
button{padding:15px}
</style>
<div class="windows">
<div class="div_item">
<p>内容1</p><input type="text" value="4869468585" id="input_1">
</div>
<div class="div_item">
<p>内容2</p><input type="text" value="测试内容12894" id="input_2">
</div>
<br><br>
<button>调用易子程序1</button>
<button>调用易子程序2</button>
<button>调用易子程序3</button>
<button>调用易子程序4</button>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
// 待易调用的JS函数1
function e_1 () {
alert('你成功调用了我');
}
</script>
</body>
</html>
易语言部分:
如果你懂JS和JQuery,那么看完之后就了解原理了,原理其实很简单:$('#input_1').val("123") 这句代码的意思就是:将ID为 input_1 的元素内容修改为 123
这句代码对于的HTML为:
<input type="text" value="4869468585" id="input_1">
那么在易语言中我们就可以用一下代码来对HTML中的内容进行修改
获取HTML页面内容的代码和修改HTML的代码类似:
子程序名 返回值类型 公开 备 注 _按钮1_被单击 变量名 类 型 静态 数组 备 注 jv 长整数型 JS输出 文本型
jv = wke.运行JS (“return $('#input_2').val()”)
JS输出 = JS到文本 (wke.全局执行 (), jv)
编辑框1.内容 = JS输出
如果页面需要调用易语言的子程序,就需要将对应js函数和子程序通过mb绑定起来,需要用到代码:
其中JS函数可以任意命名,但不支持中文,同时还要对html的相关组件(我这里为鼠标单击事件:Click)事件绑定上这个函数,如:
JS绑定_子程序1部分:
JS取参数_文本 (es, 0) 这句主要用于获取JS传递的参数,0表示第1个参数
子程序名 返回值类型 公开 备 注 JS绑定_子程序1 参数名 类 型 参考 可空 数组 备 注 es 整数型 变量名 类 型 静态 数组 备 注 参数1 文本型 参数2 文本型 参数3 文本型
参数1 = JS取参数_文本 (es, 0)
参数2 = JS取参数_文本 (es, 1)
参数3 = JS取参数_文本 (es, 2)
信息框 (参数1 + #换行符 + 参数2 + #换行符 + 参数3, 0, , )
HTML事件部分:
<button> 调用易子程序1 </button>
欢迎光临 精易论坛 (https://125.confly.eu.org/) | Powered by Discuz! X3.4 |