[ https://issues.apache.org/jira/browse/WEEX-233?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16394754#comment-16394754 ]
ASF GitHub Bot commented on WEEX-233: ------------------------------------- Github user asfgit closed the pull request at: https://github.com/apache/incubator-weex/pull/1047 > More enhanced about <web> component > ----------------------------------- > > Key: WEEX-233 > URL: https://issues.apache.org/jira/browse/WEEX-233 > Project: Weex > Issue Type: Improvement > Components: Android, iOS > Reporter: TangWei > Assignee: Adam Feng > Priority: Major > Labels: features, newbie > Original Estimate: 72h > Remaining Estimate: 72h > > ~0301 Modified version~ > ~0302 Modified version~ > _0307 Modified version_ > Hi, I'm Tw93(侑夕) from [Fliggy|https://www.fliggy.com/], I'd like to discuss > the enhancements about component, let it take over where we can't implement > through weex. > h2. 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. > h2. My solution > h3. Code > * Weex iOS: > ** > [WXWebComponent.m|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m] > ** > [WXWebComponent.h|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.h] > ** > [WXWebViewModule.m|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Module/WXWebViewModule.m] > * Weex Vue Demo: > ** [http://dotwe.org/vue/3576ed477d21dc020e63bf57dc414fff] > ** [Demo Bundle > JS|http://dotwe.org/raw/dist/3576ed477d21dc020e63bf57dc414fff.bundle.wx] > ** [Web End|http://h5.m.taobao.com/trip/wx-detection-demo/web.html] > h3. > [Demo|https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif] && > [Theory|https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png] > |!https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif|width=240!|!https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png|width=600!| > h3. Details > h4. Support to send messages from Weex to a html in component. > * Native:(W3c > [MessageEvent|https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent]) > // Weex postMessage to web > * -(void)postMessage:(NSDictionary *)data > Unknown macro: \{WXSDKInstance *instance = [WXSDKEngine topInstance]; > NSMutableString *bundleUrlOrigin = @""; if (instance.pageName) { NSString > *bundleUrl = [instance.scriptURL absoluteString]; NSURL *url = [NSURL > URLWithString:bundleUrl]; bundleUrlOrigin = [NSString > stringWithFormat:@"%@://%@%@", url.scheme, url.host, url.port ? [NSString > stringWithFormat:@":%@", url.port] : @""]; } NSDictionary *initDic = @\{ > @"type" : @"message", @"data" : data, @"origin" : bundleUrlOrigin }; NSString > *json = [WXUtility JSONString} > ())", json]; > [_jsContext evaluateScript:code]; > } > * How to use: > // Weex > const webview = weex.requireModule('webview'); > // recommend > this.$refs['wxc-web'].postMessage(\{ detail: "a message" }); > //not recommend > //webview.postMessage(this.$refs.webview, \{detail:"a message"}); > > // Web > window.addEventListener('message',function(e) \{ > console.log(e.data,e.type,e.origin); // \{ detail: "a message" } > ,"message","*" > },false) > h4. Support to send messages from a html in component to Weex. > * Native:(W3c > [MessageEvent|https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent]) > > > //Weex catch postMessage event from web > _jsContext[@"postMessage"] = ^() { > > NSArray *args = [JSContext currentArguments]; > > if (args && args.count < 2) > { return; } > > NSDictionary *data = [args[0] toDictionary]; > NSString *origin = [args[1] toString]; > > if (data == nil) \{ return; } > > NSDictionary *initDic = @ > { @"type" : @"message", @"data" : data, @"origin" : origin } > ; > > [weakSelf fireEvent:@"message" params:initDic]; > }; > > * How to use: > // Weex > <web @message="onMessage"></web> > > onMessage (e) \{ console.log(e.data,e.type,e.origin); // \{ detail: "a > message" } > ,"message","*" > }, > > // Web iframe > window.parent.postMessage(\{ detail: "a message" }, '*'); > h4. Support to render html source. > * Native: > [_webview loadHTMLString:_source baseURL:nil]; > > * How to use: > <web source='<p style="text-align: center;"><img align="absmiddle" > src="http://img03.taobaocdn.com/imgextra/i3/1124701655/TB2zmmIcpXXXXbIXpXXXXXXXXXX_!!1124701655.jpg"/></p>'></web> > Welcome to put forward any suggestion about the solution or other > requirements for the component, Thanks! -- This message was sent by Atlassian JIRA (v7.6.3#76005)