Cross-page data transfer in MUI mobile webview applications requires mobile runtime support; desktop browsers may not execute all functionality correctly.
Preloaded Page + Custom Event Approach
Start by preloading the target page during initialization to enable fast access and insure the target can register the custom event listener before data is sent.
source-page.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>MUI Custom Event Cross-Page Data</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
let targetWebview = null;
mui.init({
preloadPages: [{
url: 'target-display.html',
id: 'target-display-view'
}]
});
mui.plusReady(() => {
// Bind tap event to avoid 300ms delay on mobile
mui('#dataTrigger').on('tap', 'a', function() {
if (!targetWebview) {
targetWebview = plus.webview.getWebviewById('target-display-view');
}
// Emit custom event with structured payload
mui.fire(targetWebview, 'receiveProduct', {
productId: 'SKU-2024-007',
productTitle: 'Wireless Noise-Canceling Headphones'
});
// Open the preloaded target view
mui.openWindow({
id: 'target-display-view'
});
});
});
</script>
</head>
<body>
<div id="dataTrigger">
<a>View Product Details</a>
</div>
</body>
</html>
target-display.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Product Details</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
// Register custom event listener to capture incoming data
window.addEventListener('receiveProduct', function(e) {
const { productId, productTitle } = e.detail;
console.log('Product ID:', productId);
mui.toast(`Loaded: ${productTitle}`);
});
</script>
</head>
<body>
</body>
</html>
OpenWindow Extras Intiialization Approach
Pass data directly via the extras field when launching a new page; no preloading required, but data is only acessible after the page’s plusReady lifecycle event.
launch-source.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>MUI Extras Cross-Page Data</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
function launchWithAuth(targetUrl, viewId, authData) {
mui.openWindow({
url: targetUrl,
id: viewId,
extras: authData
});
}
mui.plusReady(() => {
mui('#authTrigger').on('tap', 'a', function() {
const sessionData = {
userUid: 'acc-8975621',
sessionToken: 'jwt_eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
userTier: 'premium'
};
launchWithAuth('auth-target.html', 'auth-target-view', sessionData);
});
});
</script>
</head>
<body>
<div id="authTrigger">
<a>Access Premium Content</a>
</div>
</body>
</html>
auth-target.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Premium Dashboard</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.plusReady(() => {
const currentView = plus.webview.currentWebview();
// Destructure and validate extras
const { userUid, sessionToken, userTier = 'standard' } = currentView;
if (userTier === 'premium') {
mui.toast(`Welcome back, Premium User ${userUid.slice(-4)}!`);
} else {
mui.toast('Redirecting to standard content...');
setTimeout(() => mui.back(), 1500);
}
});
</script>
</head>
<body>
</body>
</html>