Browse Source

fix(windows): Add postMessage for Windows WebView (#1263 by @kaiguo)

Kai Guo 4 years ago
parent
commit
e402e739ea
No account linked to committer's email address

+ 8
- 0
docs/Reference.md View File

80
 - [`clearCache`](Reference.md#clearCache)
80
 - [`clearCache`](Reference.md#clearCache)
81
 - [`clearHistory`](Reference.md#clearHistory)
81
 - [`clearHistory`](Reference.md#clearHistory)
82
 - [`requestFocus`](Reference.md#requestFocus)
82
 - [`requestFocus`](Reference.md#requestFocus)
83
+- [`postMessage`](Reference.md#postMessage)
83
 
84
 
84
 ---
85
 ---
85
 
86
 
1240
 
1241
 
1241
 Request the webView to ask for focus. (People working on TV apps might want having a look at this!)
1242
 Request the webView to ask for focus. (People working on TV apps might want having a look at this!)
1242
 
1243
 
1244
+### `postMessage(str)`
1245
+
1246
+```javascript
1247
+postMessage('message');
1248
+```
1249
+Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
1250
+
1243
 ### `clearFormData()`
1251
 ### `clearFormData()`
1244
 
1252
 
1245
 (android only)
1253
 (android only)

+ 8
- 0
src/WebView.windows.tsx View File

104
     );
104
     );
105
   }
105
   }
106
 
106
 
107
+  postMessage = (data: string) => {
108
+    UIManager.dispatchViewManagerCommand(
109
+      this.getWebViewHandle(),
110
+      UIManager.getViewManagerConfig('RCTWebView').Commands.postMessage,
111
+      [String(data)],
112
+    );
113
+  };
114
+
107
   /**
115
   /**
108
    * We return an event with a bunch of fields including:
116
    * We return an event with a bunch of fields including:
109
    *  url, title, loading, canGoBack, canGoForward
117
    *  url, title, loading, canGoBack, canGoForward

+ 5
- 7
windows/ReactNativeWebView/ReactNativeWebView.vcxproj View File

63
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
63
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
64
   <ImportGroup Label="ExtensionSettings">
64
   <ImportGroup Label="ExtensionSettings">
65
   </ImportGroup>
65
   </ImportGroup>
66
+  <PropertyGroup>
67
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
68
+  </PropertyGroup>
66
   <ImportGroup Label="Shared">
69
   <ImportGroup Label="Shared">
67
-    <Import Project="..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')" />
68
-    <Import Project="..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')"/>
70
+    <Import Project="$(ReactNativeWindowsDir)\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" />
69
   </ImportGroup>
71
   </ImportGroup>
70
   <ImportGroup Label="PropertySheets">
72
   <ImportGroup Label="PropertySheets">
71
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
73
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
139
     <None Include="PropertySheet.props" />
141
     <None Include="PropertySheet.props" />
140
   </ItemGroup>
142
   </ItemGroup>
141
   <ItemGroup>
143
   <ItemGroup>
142
-    <ProjectReference Include="..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
143
-      <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
144
-      <Private>false</Private>
145
-    </ProjectReference>
146
-    <ProjectReference Include="..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
144
+    <ProjectReference Include="$(ReactNativeWindowsDir)\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj">
147
       <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
145
       <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
148
       <Private>false</Private>
146
       <Private>false</Private>
149
     </ProjectReference>
147
     </ProjectReference>

+ 5
- 1
windows/ReactNativeWebView/ReactWebView.cpp View File

128
                 return;
128
                 return;
129
             }
129
             }
130
         }
130
         }
131
+        
132
+        PostMessage(winrt::hstring(args.Value()));
133
+    }
131
 
134
 
135
+    void ReactWebView::PostMessage(winrt::hstring const& message) {
132
         m_reactContext.DispatchEvent(
136
         m_reactContext.DispatchEvent(
133
             m_webView,
137
             m_webView,
134
             L"topMessage",
138
             L"topMessage",
135
             [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
139
             [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
136
                 eventDataWriter.WriteObjectBegin();
140
                 eventDataWriter.WriteObjectBegin();
137
                 {
141
                 {
138
-                    WriteProperty(eventDataWriter, L"data", winrt::to_string(args.Value()));
142
+                    WriteProperty(eventDataWriter, L"data", message);
139
                 }
143
                 }
140
                 eventDataWriter.WriteObjectEnd();
144
                 eventDataWriter.WriteObjectEnd();
141
             });
145
             });

+ 1
- 0
windows/ReactNativeWebView/ReactWebView.h View File

13
     public:
13
     public:
14
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
14
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
15
         winrt::Windows::UI::Xaml::Controls::WebView GetView();
15
         winrt::Windows::UI::Xaml::Controls::WebView GetView();
16
+        void PostMessage(winrt::hstring const& message);
16
 
17
 
17
     private:
18
     private:
18
         winrt::Windows::UI::Xaml::Controls::WebView m_webView{ nullptr };
19
         winrt::Windows::UI::Xaml::Controls::WebView m_webView{ nullptr };

+ 1
- 0
windows/ReactNativeWebView/ReactWebView.idl View File

3
     runtimeclass ReactWebView : Windows.UI.Xaml.Controls.UserControl{
3
     runtimeclass ReactWebView : Windows.UI.Xaml.Controls.UserControl{
4
         ReactWebView(Microsoft.ReactNative.IReactContext context);
4
         ReactWebView(Microsoft.ReactNative.IReactContext context);
5
         Windows.UI.Xaml.Controls.WebView GetView();
5
         Windows.UI.Xaml.Controls.WebView GetView();
6
+        void PostMessage(String message);
6
     };
7
     };
7
 } // namespace ReactNativeWebView
8
 } // namespace ReactNativeWebView

+ 3
- 0
windows/ReactNativeWebView/ReactWebViewManager.cpp View File

108
         commands.Append(L"reload");
108
         commands.Append(L"reload");
109
         commands.Append(L"stopLoading");
109
         commands.Append(L"stopLoading");
110
         commands.Append(L"injectJavaScript");
110
         commands.Append(L"injectJavaScript");
111
+        commands.Append(L"postMessage");
111
         return commands.GetView();
112
         return commands.GetView();
112
     }
113
     }
113
 
114
 
135
             }
136
             }
136
             else if (commandId == L"injectJavaScript") {
137
             else if (commandId == L"injectJavaScript") {
137
                 webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
138
                 webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
139
+            } else if(commandId == L"postMessage") {
140
+                m_reactWebView.PostMessage(winrt::to_hstring(commandArgs[0].AsString()));
138
             }
141
             }
139
         }
142
         }
140
     }
143
     }