This article describes cross-platform interaction between CRM pages and third-party pages, including opening an H5 page and returning results on mobile, and communication through iframe + postMessage on the web. After the third-party page completes selection, query confirmation, lightweight data entry, or similar tasks, it can return the result to the current page, which then handles the result according to its own logic.

Applicable Scenario

This solution is suitable for scenarios where a CRM page opens a third-party page to complete selection, query confirmation, lightweight data entry, or similar tasks, and then uses the returned result on the current page.

Solution Overview

Platform	Open Method	Data Transfer Method	Return Method
Mobile	Open a third-party H5 page through fsapi.jsapi.webviewOpen	Pass initial parameters through inputData	The H5 page returns data through FSOpen.util.sendNotification
Web	Embed a third-party page through an iframe	The parent page and child page communicate through postMessage	The child page returns data to the parent page through postMessage

Unified Interaction Flow

1. The user clicks an entry point on the current CRM page.
2. The current page opens a third-party page and passes the required context parameters.
3. The user completes data selection, query confirmation, lightweight data entry, or similar tasks on the third-party page.
4. The third-party page returns the result to the current CRM page.
5. The current CRM page receives the result and consumes it according to the host page's own logic.

Mobile Implementation

On mobile, cross-platform interaction can be implemented by opening a third-party H5 page from a mini program page and returning the result from the H5 page.

Implementation flow:

1. The field component in the mini program listens for the user click action.
2. Open the third-party H5 page through fsapi.jsapi.webviewOpen.
3. Pass the required context parameters from the current page to the H5 page through inputData.
4. After the H5 page completes selection, query confirmation, lightweight data entry, or similar tasks, return the result through FSOpen.util.sendNotification.
5. After the mini program receives the callback, the current page determines how to handle the returned value.

Sequence Diagram

Core Code

Note

The URL, field API names, and business data in the following code are examples only. Replace them with values from your actual environment.

Mini Program Opens H5

import fsapi from 'fs-hera-api';

Component({
    methods: {
        openWebview() {
            fsapi.jsapi.webviewOpen({
                url: `https://third.example.com/third-select.html?_v=${+new Date()}`,
                title: 'Third-Party Page',
                inputData: {
                    bizType: 'customer-select'
                },
                onSuccess: (rst) => {
                    this.handleThirdResult(rst)
                }
            })
        },
        handleThirdResult(data) {
            this.data.context.setData({
                "field_pwcname__c": data.name,
                "field_pwxtel__c": data.tel,
                "field_pwcregnumber__c": data.regNumber,
                "field_pwcregisteredCapital__c": data.registeredCapital
            });
        }
    }
})

H5 Returns Result

function submitResult() {
    const payload = {
        name: 'Example Enterprise',
        tel: '13800000000',
        regNumber: '91310000XXXXXX',
        registeredCapital: '10 million'
    };

    FSOpen.util.sendNotification(payload);
}

Key Points

• fsapi.jsapi.webviewOpen is used to open a third-party H5 page from the mini program.
• inputData is used to pass initialization parameters to the third-party H5 page.
• onSuccess is used to receive the data returned from the third-party H5 page.
• How the returned data is used on the current page depends on the page logic. In a custom form field scenario, it can be handled according to page capabilities, for example by using context.setData.

Applicable Scenarios

• A mini program form needs to rely on a third-party page to complete complex value selection, query confirmation, or lightweight data entry.
• The third-party system already provides an independent H5 page.
• The current page only needs to receive the selected result and continue processing.

Web Implementation

On the web, a common approach is to embed a third-party page in an iframe and use postMessage for two-way communication to implement cross-platform data interaction.

Note

This article only describes the iframe + postMessage communication method. After the parent page receives the returned result, how to update page state or write data to fields must be implemented according to the host page's own capabilities.

Implementation flow:

1. The CRM page acts as the parent page and embeds the third-party page in an iframe.
2. The parent page sends initialization parameters to the iframe at the appropriate time.
3. After the user completes selection, query confirmation, lightweight data entry, or similar tasks, the third-party page returns the result to the parent page through postMessage.
4. The parent page listens for the message event and verifies the message source.
5. After receiving the message, the parent page handles the returned result according to the host page's own logic.

Sequence Diagram

Core Code

Note

The domains, URLs, and business data in the following code are examples only. Replace them with values from your actual environment. In this example, the parent page domain is https://crm.example.com, and the third-party page domain is https://third.example.com.

Parent Page

<template>
    <div style="width: 100%;">
        <iframe
            ref="thirdFrame"
            width="100%"
            height="600"
            frameborder="0"
            :src="iframeUrl">
        </iframe>
    </div>
</template>

export default {
    data() {
        return {
            iframeUrl: 'https://third.example.com/third-select.html',
            targetOrigin: 'https://third.example.com'
        }
    },
    mounted() {
        window.addEventListener('message', this.handleMessage);
    },
    beforeDestroy() {
        window.removeEventListener('message', this.handleMessage);
    },
    methods: {
        postInitData() {
            const iframeWindow = this.$refs.thirdFrame && this.$refs.thirdFrame.contentWindow;
            if (!iframeWindow) return;

            iframeWindow.postMessage({
                type: 'init',
                payload: {
                    bizType: 'customer-select',
                    keyword: 'Fxiaoke'
                }
            }, this.targetOrigin);
        },
        handleMessage(event) {
            if (event.origin !== this.targetOrigin) return;

            const message = event.data || {};
            if (message.type !== 'selectResult') return;

            this.handleThirdResult(message.payload);
        },
        handleThirdResult(payload) {
            console.log('Received the result returned from the third-party page', payload);
            // After receiving the result, handle the data according to the host page's own logic
        }
    }
}

Third-Party Page

window.addEventListener('message', (event) => {
    if (event.origin !== 'https://crm.example.com') return;

    const message = event.data || {};
    if (message.type === 'init') {
        console.log('Received initialization parameters from the parent page', message.payload);
    }
});

function submitResult() {
    window.parent.postMessage({
        type: 'selectResult',
        payload: {
            id: 'customer_001',
            name: 'Example Customer'
        }
    }, 'https://crm.example.com');
}

Key Points

• The parent page is responsible for embedding the third-party page and maintaining the target domain used for communication.
• Both the child page and the parent page should verify origin and must not accept messages unconditionally.
• It is recommended that the data structure passed through postMessage include type and payload so that different messages can be distinguished clearly.
• After receiving the returned result, the parent page enters the host page's own processing logic. How to update page state or fields depends on the host page implementation.

Applicable Scenarios

• A web page needs to embed an existing third-party business page.
• The third-party page and the CRM page only need lightweight data exchange.
• Both pages can agree in advance on the message format and source domains.

Notes

1. Both mobile and web scenarios need to agree in advance on the parameter format and returned data structure.
2. When using postMessage on the web, origin must be verified to avoid accepting messages from unknown sources.
3. When embedding an iframe on the web, make sure the third-party system allows embedding and meets the corresponding security requirements.
4. If the returned data ultimately needs to be written to form fields, the current host page needs to implement the specific data handling logic.

Demo Navigation

Other demo entries:

Mobile

• Cross-platform data interaction between mini programs and H5
• Privacy statement confirmation popup on the first screen

Web

• Date and time
• Charts
• iframe
• Print
• URL