iframe postMessage 테스트

1. React Native 프로젝트 생성 (Mac Book)

# npx @react-native-community/cli init WebViewTestApp
Need to install the following packages:
@react-native-community/cli@19.1.1
Ok to proceed? (y) y

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


              Welcome to React Native 0.80.2!
                 Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Do you want to install CocoaPods now? Needed for running iOS project … yes
✔ Installing Ruby Gems
⠇ Installing CocoaPods dependencies  (this may take a few minutes)
✔ Initializing Git repository


  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/kay/job/test2/WebViewTestApp" && npx react-native run-android

  Run instructions for iOS:
    • cd "/Users/kay/job/test2/WebViewTestApp"

    • npx react-native run-ios
    - or -
    • Open WebViewTestApp/ios/WebViewTestApp.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for macOS:
    • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

 

 

react-native-webview 설치

# npm install react-native-webview

added 1 package, and audited 895 packages in 2s

161 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

 

 

# vi WebViewScreen.js
# npx react-native run-android

 

 

App.tsx

// App.tsx
import React from 'react';
import WebViewScreen from './WebViewScreen'; // 경로 확인

const App = () => {
  return <WebViewScreen />;
};

export default App;

 

 

WebViewScreen.js

import React from 'react';
import {View, Alert} from 'react-native';
import {WebView} from 'react-native-webview';

const WebViewScreen = () => {
  const handleMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      console.log('📩 Received message from web:', data);

      if (data.event === 'testMessage') {
        Alert.alert('Message from Web', data.data.message);
      }
    } catch (error) {
      console.error('Invalid message received:', event.nativeEvent.data);
    }
  };

  return (
    <View style={{flex: 1}}>
      <WebView
        source={{uri: 'http://10.30.0.183:8000/dashboard/login?next=/dashboard/test.html'}} // 아래에서 설명
        onMessage={handleMessage}
        javaScriptEnabled={true}
      />
    </View>
  );
};

export default WebViewScreen;

 

 

import React from 'react';
import {View, Alert} from 'react-native';
import {WebView} from 'react-native-webview';

const WebViewScreen = () => {
  const handleMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      console.log('📩 Received message from web:', data);

      if (data.event === 'testMessage') {
        Alert.alert('Message from Web', data.data.message);
      }
    } catch (error) {
      console.error('Invalid message received:', event.nativeEvent.data);
    }
  };

  return (
    <View style={{flex: 1}}>
      <WebView
        source={{uri: 'https://your-domain.com/webview-test.html'}} // 아래에서 설명
        onMessage={handleMessage}
        javaScriptEnabled={true}
      />
    </View>
  );
};

export default WebViewScreen;