api.execScript 与 api.sendEvent

最新推荐文章于 2023-04-27 08:48:03 发布

原创最新推荐文章于 2023-04-27 08:48:03 发布 · 4.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#api.execScript #api.addEventListener

apicloud 专栏收录该内容

5 篇文章

订阅专栏

本文介绍JavaScript中实现跨窗口通信的方法api.execScript及注意事项，并演示如何利用api.sendEvent发送自定义事件以及addEventListener进行监听。

这种知识点很简单，本来觉得没什么好讲的，但自己偏偏在此踩了几次坑，所以做个笔记。

一、api.execScript();

var options = {
    name: 'tom',
    age: 18
}
api.execScript({
    name: 'shop_win',
    frameName: theFrameName,
    script: 'getSubItemId('+JSON.stringify(options)+')'
});

此处有 2 个坑：
第一：传值给 frameGroup 中的某个页面时，frameName 不能填写 frameGroup 的名字，而只能填写该页面的名字；否则则这个 script 中的函数会在 frameGroup 下的所有 frame 页面执行。

第二：script 函数可以传参，但是注意格式，当为对象时，要用 JSON.stringify 转格式。

二、api.sendEvent
点击搜索发送事件（将任意一个自定义事件广播出去，该事件可在任意页面通过 addEventListener 监听收到。）

function searchIt(keyWord){
    var keyWord = $api.val($api.byId('search'));
    if(keyWord){
        openScenicListFrame(keyWord);
        api.sendEvent({
            name: 'clickSearch',
            extra: {
                isRefresh: 1,
                keyWord: keyWord
            }
        });
    hasHistory(keyWord);
    }
}

在其他页面监听事件

function listenHistory(){
    api.addEventListener({
        name: 'historyItem'
    }, function(ret, err){
        var keyWord = ret.value.keyWord;
        if(keyWord){
            putDataIntoArr(keyWord);
            hasHistory();
        }
    });
}

三、addEventListener 事件监听

	方法一：document.getElementById("search").addEventListener("input",function(e){
		var keyword = e.target.value;
		console.log(keyword);
	})
	方法二：document.getElementById("search").oninput = function listenEvent(e){
		var keyword = e.target.value;
		console.log(keyword);
	})
        此外 还可以监听 onblur 等。

当初使用时不知道怎么就踩了坑，现在感觉也没什么可写的，很基本的东西。