English
CRM Cross-Platform Data Interaction
About 1318 wordsAbout 4 min
2025-12-18
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
- The user clicks an entry point on the current CRM page.
- The current page opens a third-party page and passes the required context parameters.
- The user completes data selection, query confirmation, lightweight data entry, or similar tasks on the third-party page.
- The third-party page returns the result to the current CRM page.
- 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:
- The field component in the mini program listens for the user click action.
- Open the third-party H5 page through
fsapi.jsapi.webviewOpen. - Pass the required context parameters from the current page to the H5 page through
inputData. - After the H5 page completes selection, query confirmation, lightweight data entry, or similar tasks, return the result through
FSOpen.util.sendNotification. - 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.webviewOpenis used to open a third-party H5 page from the mini program.inputDatais used to pass initialization parameters to the third-party H5 page.onSuccessis 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:
- The CRM page acts as the parent page and embeds the third-party page in an
iframe. - The parent page sends initialization parameters to the
iframeat the appropriate time. - 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. - The parent page listens for the
messageevent and verifies the message source. - 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
originand must not accept messages unconditionally. - It is recommended that the data structure passed through
postMessageincludetypeandpayloadso 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
- Both mobile and web scenarios need to agree in advance on the parameter format and returned data structure.
- When using
postMessageon the web,originmust be verified to avoid accepting messages from unknown sources. - When embedding an
iframeon the web, make sure the third-party system allows embedding and meets the corresponding security requirements. - 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:
