Great proposal for weex-web communication! Please be careful about the consistency between iOS and Android on web-native bridge, injecting global function may only be available on iOS. So I suggest Tw93 and misakuo have a more detailed discussion on the implementation before kicking off.
Thanks. Adam Feng On 28 Feb 2018, 2:09 PM +0800, 汤威 <t...@qq.com>, wrote: > @Hanks ZhangThank you very much for your advice. I also believe that use the > MessageEvent is more appropriate, I will modify the implementation. > > > About the implementation of the Android platform, I'll give it a try. @misakuo > > > ------------------ 原始邮件 ------------------ > 发件人: "Hanks Zhang"<zhanghan...@gmail.com>; > 发送时间: 2018年2月28日(星期三) 中午12:14 > 收件人: "dev"<dev@weex.incubator.apache.org>; > > 主题: Re: 【Discussion】 More enhanced about <web> component > > > > +1. I think it could be very helpful to achieve the communication between > weex pages and web pages. > > By the way, the exposed API should be consistent with web standards. Using > "postMessage" and "addEventListener" is OK, but the "notify" event is > specific by weex which is not standard. I think it's a good opportunity to > amend it, use the MessageEvent is more appropriate. It was designed for > cross-document messaging. https://www.w3.org/TR/webmessaging/#web-messaging > > 2018-02-28 12:03 GMT+08:00 misakuo <misa...@apache.org>: > > > It is a great idea to add two-way communication channel to web component, I > > can help provide the implementation of the Android platform. > > Render the html source is also a useful feature, it makes us easier to > > achieve some complex typesetting like rich text. > > very good proposal. > > > > 2018-02-28 11:37 GMT+08:00 汤威 <t...@qq.com>: > > > > > Hi, I'm Tw93 (侑夕) from Fliggy, I'd like to discuss the enhancements about > > > component, let it take over where we can't implement through weex. > > > > > > > > > Target > > > > > > <web> is used to display web content that specified by src attribute in > > > weex page,We also can use webview module to control WebView behavior such > > > as goBack, goForward and reload. > > > > > > But it's not enough in most businesses，I think a more enhanced web > > > component should have the following: > > > > > > > > > Support to send messages from Weex to a html in component. > > > > > > > > > Support to send messages from a html in component to Weex. > > > > > > > > > Support to render html source. > > > > > > > > > Previously, component was an island that only rendered a remote url, but > > > enabled it to communicate through the context native to the webView. Then > > > I'm going to describe the solution that I came up with. > > > > > > > > > My solution > > > > > > > > > Code > > > > > > Weex iOS: > > > > > > https://github.com/tw93/incubator-weex/blob/ios- > > > feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m > > > > > > > > > > > > Weex Vue Demo: > > > > > > http://dotwe.org/vue/f0c7d877fb6b0e9b661aa4f53a652793 > > > > > > > > > Demo Bundle JS > > > > > > > > > Web End > > > > > > > > > > > > > > > Demo && Theory > > > > > > > > > > > > > > > > > > > > > > > > Details > > > > > > > > > Support to send messages from Weex to a html in component. > > > > > > Native： > > > > > > - (void)notifyWebview:(NSDictionary *) data { NSString *json = > > > [WXUtility JSONString:data]; NSString *code = [NSString > > > stringWithFormat:@"(function(){var evt=null;var data=%@;if(typeof > > > CustomEvent==='function'){evt=new CustomEvent('notify',{detail: > > > data})}else{evt=document.createEvent('CustomEvent'); > > > evt.initCustomEvent('notify',true,true,data)}document. > > dispatchEvent(evt)}())", > > > json]; [_jsContext evaluateScript:code]; } > > > > > > How to use： > > > > > > // Weex const webview = weex.requireModule('webview'); > > > webview.notifyWebview(this.$refs.webview, "message"); // Web > > > document.addEventListener('notify',function(e){ console.log(e.detail) > > > },false) > > > > > > > > > Support to send messages from a html in component to Weex. > > > > > > > > > Native： > > > > > > _jsContext[@"postMessage"] = ^(JSValue *data){ [weakSelf > > fireEvent:@"notify" > > > params:[data toDictionary]]; }; > > > > > > How to use： > > > > > > // Weex <web @notify="onMessage"></web> // Web > > > window.postMessage(message, targetOrigin, false); > > > > > > > > > Support to render html source. > > > > > > > > > Native: > > > > > > [_webview loadHTMLString:_source baseURL:nil]; > > > > > > How to use: > > > > > > <web source='<p style="text-align: center;">Any HTML you want to > > > add.</p>'></web > > > > > > Welcome to put forward any suggestion about the solution or other > > > requirements for the component. > > > > > > After that, I'm going to submit a pr. Thanks！
