Hello @b10007535fda45460cb1
Since I don’t know your source code exactly, this suggestion may not work 100%, but still feel free to try. I use this structure in another project of mine and it works fine.
Here’s how to fix the issue with Kakao Share in your Flutter InAppWebView implementation:
- Modify the Flutter InAppWebView settings:
InAppWebView(
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
useShouldOverrideUrlLoading: true,
javaScriptEnabled: true,
javaScriptCanOpenWindowsAutomatically: true
),
android: AndroidInAppWebOptions(
useHybridComposition: true,
// Add this line
mixedContentMode: AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW
),
),
// Add URL handling callback
shouldOverrideUrlLoading: (controller, navigationAction) async {
var uri = navigationAction.request.url!;
if (uri.scheme == 'kakaolink' || uri.scheme == 'kakaoplus') {
try {
final canLaunch = await url_launcher.canLaunch(uri.toString());
if (canLaunch) {
await url_launcher.launch(uri.toString());
return NavigationActionPolicy.CANCEL;
}
} catch (e) {
print(e);
}
}
return NavigationActionPolicy.ALLOW;
},
)
- Update your Vue code:
import { onMounted, ref } from "vue";
export default {
setup() {
const isKakaoInitialized = ref(false);
const initKakao = () => {
if (!window.Kakao.isInitialized()) {
try {
window.Kakao.init('JS APP KEY');
isKakaoInitialized.value = window.Kakao.isInitialized();
console.log('Kakao initialized:', isKakaoInitialized.value);
} catch (error) {
console.error('Kakao init error:', error);
}
}
};
const sendKakaoMessage = async () => {
if (!isKakaoInitialized.value) {
console.error('Kakao not initialized');
return;
}
const templateArgs = {
title: 'Title Area',
description: 'Description Area',
button: 'Download',
image: 'https://d187qcel719m8w.cloudfront.net/b2c/icon_sns_kakao.png'
};
try {
await window.Kakao.Share.sendCustom({
templateId: 111855,
templateArgs: templateArgs,
});
} catch (error) {
console.error('Kakao share error:', error);
}
};
onMounted(() => {
initKakao();
});
return {
sendKakaoMessage
};
}
};
- Add Kakao SDK to index.html:
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
- Add to AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
<queries>
<package android:name="com.kakao.talk" />
</queries>
- Additional checks:
- Verify domain registration in Kakao Developers Console
- Confirm JavaScript app key is correct
- Verify template ID is valid
- Check if web domain is in allowed domain list
If the issue persists after these changes, check the developer console logs for specific error messages. The about:blank#blocked error usually occurs due to incorrect URL handling or initialization issues, which these changes should address.
