iframe cdn不响应postmessage（）
我有一个具有CDN源的iframe。但是CDN的HTML没有回应JS的后母语API。据我所知，邮政API应该在跨域工作。这是我的代码：
主应用：
<iframe ref={elemRef} style={{position: 'relative', height: '90vh', width: '100%'}} id={'myIframe'} src='http://d34gxw3jqlasaag.cloudfront.net/sampletemplate2.html' frameBorder="0"></iframe>
const elemRef = useCallback((node) => {
console.log("node: ", node);
frame = document.getElementById("myIframe");
console.log("frame: ", frame)
if (node !== null) {
// frame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}});
setTimeout(() => {
frame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}});
}, 500);
}
SampleTemplate2.html
<!DOCTYPE html>
<html>
<head>
<title>My first HTML document</title>
<script>
const cloudFrontUrl = 'http://localhost:3333/build';
const moduleScript = document.createElement('script');
moduleScript.setAttribute('type', 'module');
moduleScript.setAttribute('src', `${cloudFrontUrl}/studios.esm.js`);
const nomoduleScript = document.createElement('script');
nomoduleScript.setAttribute('nomodule', '');
nomoduleScript.setAttribute('src', `${cloudFrontUrl}/studios.js`);
document.head.append(moduleScript);
document.head.append(nomoduleScript);
window.addEventListener('message', function(event) {
var origin = event.origin
// if (origin !== /*the container's domain url*/)
// return;
console.log("Received event.....: ", event)
if (typeof event.data == 'object' && event.data.call=='sendValue') {
// Do something with event.data.value;
console.log("task.input: ", event.data.value.task)
const data = event.data.value.task.input
const htmlEncodedTaskInput = JSON.stringify(data.taskInput).replaceAll("\"",""");
console.log("data: ", data);
console.log("htmlEncodedTaskInput: ", htmlEncodedTaskInput)
//Load the requested template dynamically
const template = `<task-loader domain="'beta'"
template-name="${data.template_name}"
task-input="${escape(htmlEncodedTaskInput)}"/>`
document.getElementById("placeholder").innerHTML = template;
}
}, false);
</script>
<div id="placeholder"></div>
</head>
</html>
值得注意的是，如果我将文件SampleTemplate2.html放入Main Window的子文件夹中，则可以响应。但是当我尝试CDN时，它没有响应
I have a iFrame which has CDN source. but CDN'S html is not responding to postMessage API of JS. As far as I know, postMessage API is suppose to work cross domain. Here is my code:
Main App:
<iframe ref={elemRef} style={{position: 'relative', height: '90vh', width: '100%'}} id={'myIframe'} src='http://d34gxw3jqlasaag.cloudfront.net/sampletemplate2.html' frameBorder="0"></iframe>
const elemRef = useCallback((node) => {
console.log("node: ", node);
frame = document.getElementById("myIframe");
console.log("frame: ", frame)
if (node !== null) {
// frame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}});
setTimeout(() => {
frame.contentWindow.postMessage({call:'sendValue', value: {task: {input: taskInput}}});
}, 500);
}
sampletemplate2.html
<!DOCTYPE html>
<html>
<head>
<title>My first HTML document</title>
<script>
const cloudFrontUrl = 'http://localhost:3333/build';
const moduleScript = document.createElement('script');
moduleScript.setAttribute('type', 'module');
moduleScript.setAttribute('src', `${cloudFrontUrl}/studios.esm.js`);
const nomoduleScript = document.createElement('script');
nomoduleScript.setAttribute('nomodule', '');
nomoduleScript.setAttribute('src', `${cloudFrontUrl}/studios.js`);
document.head.append(moduleScript);
document.head.append(nomoduleScript);
window.addEventListener('message', function(event) {
var origin = event.origin
// if (origin !== /*the container's domain url*/)
// return;
console.log("Received event.....: ", event)
if (typeof event.data == 'object' && event.data.call=='sendValue') {
// Do something with event.data.value;
console.log("task.input: ", event.data.value.task)
const data = event.data.value.task.input
const htmlEncodedTaskInput = JSON.stringify(data.taskInput).replaceAll("\"",""");
console.log("data: ", data);
console.log("htmlEncodedTaskInput: ", htmlEncodedTaskInput)
//Load the requested template dynamically
const template = `<task-loader domain="'beta'"
template-name="${data.template_name}"
task-input="${escape(htmlEncodedTaskInput)}"/>`
document.getElementById("placeholder").innerHTML = template;
}
}, false);
</script>
<div id="placeholder"></div>
</head>
</html>
It's worth to note that if I put the file sampletemplate2.html inside main window's sub folder, it responses fine. But it doesn't respond when I try through CDN
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尽管 工作跨域，在这种情况下，必须指定第二个参数（
targetOrigin），在这种情况下，它似乎是http：//d34gxw3jqlasaag.cloudfront。 net。Although
postMessageworks cross-domain, you must in that case specify the second parameter (targetOrigin), which, in this case, seem to behttp://d34gxw3jqlasaag.cloudfront.net.