Comments (28)
We use it on a Shopify plugin, and the XComponentInit send a request to shopify side.
But It took more than 1 sec.
So I need a way to implicitly set the timeout.
from zoid.
You could try xcomponent.postRobot.CONFIG.ACK_TIMEOUT = 2000;
-- but I suspect there's a deeper problem here. Post messages are asynchronous, but they should be almost instantaneous, so if a message is timing out after 1000ms it's likely it's failing for some other reason.
Is your code hosted somewhere I can read/try?
Also -- messages in xcomponent are restricted by domain. If this a problem with one env and not another, my suspicion would be that there's some mismatched domain. What settings are you using in the component definition?
from zoid.
I'm guessing this is the module: https://github.com/PostCo/postco-shopify/commits/master
Noticed you reverted xcomponent back to an old version. Were you seeing this issue only with the latest?
from zoid.
@bluepnume Yes, it only happens on the newer versions, on local development it is fine, maybe it is fast enough, but on production, it sends the request to Shopify. The plugin is mounted on the client Shopify shop's cart page. I can only confirm this problem happens on v1.0.70, v1.0.80, and v1.0.100. Not sure for the other versions. And it works fine on v1.0.63.
from zoid.
Oh right, so https://postco-plugin-production.herokuapp.com/delivery
does a redirect to shopify?
xcomponent uses the specified url to decide which domain to listen to messages from. Can you try setting domain
to shopify's domain (or the final domain that the iframe lands on) and seeing if it works?
Are you expecting shopify to send callbacks up to you, through xcomponent?
from zoid.
Will close this issue soon, let me know if there are any more updates on your side.
from zoid.
I don't expect Shopify to send callback through xcomponent, but I mount them to different Shopify shops, so I assume I am expecting it.
Basically, the flow is there is a script tag on each Shopify shop's cart page that loads the script to mount the xcomponent on, and then target another app, which is https://postco-plugin-production.herokuapp.com/delivery to load in the iframe.
By the way, how can I set the domain?
from zoid.
Hi Andy. Sorry, didn't get a notification for this thread back when you replied. Did you have any luck getting your use-case to work?
If not, please share some example code so I can try to help.
from zoid.
@bluepnume I have this error only in IE 11 "Error: No ack for postMessage xcomponent_init in 1000ms"
Same component is working fine in Chrome and Firefox.
I'm not specifying any domains settings
My config is something like this
Connector = xcomponent.create({
tag: 'connector',
url: "[url to my html page]",
dimensions: {
width: '800px',
height: '400px'
},
contexts: {
popup: true
},
defaultLogLevel: 'warn',
props: {
getAccessTokenAsync: {
type: 'function',
required: true
},
selectedAppId: {
type: 'string',
required: false
},
selectedConnectionId: {
type: 'string',
required: false
},
onSuccess: {
type: 'function',
required: true
},
onFailure: {
type: 'function',
required: true
}
}
});
"\xcomponent\demo\basic\popup\index.htm" seems to be working fine in IE 11 so I'm going to have to investigate further
from zoid.
@harouny are you using xcomponent.js or xcomponent.frame.js?
For popup messaging to work in IE11, you need to set up a bridge for post-messages to go through. It's annoying but there's no other good way :(
-
Follow steps a) and b) here: https://github.com/krakenjs/post-robot/blob/master/README.md#parent-to-popup-messaging
(note -- you don't need step c), xcomponent will open the bridge for you)
-
Add a
bridgeUrl
option in your xcomponent which points to the bridge you set up:xcomponent.create({ bridgeUrl: 'http://yy.com/bridge.html' });
-
When you render the component, xcomponent will use post-robot to open the bridge and then it will use the bridge to send and receive messages.
I'll add some fuller docs for this soon...
from zoid.
@bluepnume
I'm using xcomponent.js. I wasn't aware of tge IE 11 bridge thingy. Thanks for the hint!
from zoid.
Let me know if you run into any problems. Also added #86 to make this a more obvious failure.
from zoid.
@bluepnume
Since I'm not using post-robot directly am I still need to do a) somehow?
a. Use the special ie build of post-robot: dist/post-robot.ie.js.
from zoid.
Sorry It will be in the bridge only....thanks :)
from zoid.
@harouny -- only when you load post-robot in the bridge.html
url.
In fact -- you can avoid dealing with post-robot directly just by loading xcomponent or your component in the frame. So in step b) you could load <script src="http://yy.com/js/my-component.js"></script>
or <script src="http://yy.com/js/xcomponent.js"></script>
which will implicitly pull in post-robot
from zoid.
I think a) and b) need to be swiched for clarity
from zoid.
I agree in the context of xcomponent. When I add bridge docs over here, there's probably no need to mention post-robot at all.
(In fact if you feel like contributing any docs here, please feel free!)
from zoid.
Sure mate, I will. Thanks
from zoid.
@bluepnume
I have added "bridgeUrl" to xcomponent.create but still doesn't work. In my page I don't see the Iframe and I don't see my bridge html page being loaded in network tap.
I found this code in openBridge method:
if (!this.driver.needsBridge) {
return;
}
But I haven't seen in code anywhere we set driver.needsBridge
Any ideas?
from zoid.
So, just to be sure -- you're running this in IE, and you're trying to load a component on a different domain, right? It'll only try to load the bridge if it detects IE.
this.driver.needsBridge
is set to true for popup mode -- are you seeing this condition being hit?
from zoid.
Yes, IE and loading a component on a different domain via a popup
Where in code we set this.driver.needsBridge
to true?
from zoid.
I was gonna point to the code location, then I realized it's not actually there. I think this got missed out in some refactoring. Lemme quickly double check this.
from zoid.
OK, cool, somehow good news :)
from zoid.
OK try the latest code :) removed that check, it's redundant. As usual, great catch.
from zoid.
Bridge is working now, thanks for the quick fix!
from zoid.
Cool! Going to close this now.
from zoid.
Hey,
Encountered the same issue with my project. Attempted to follow the above steps to no avail. Here's what I did exactly:
- Create a bridge page, including only
xcomponent.js
. Do I need postrobot ie, or my component as well? #49 (comment) - Specify
bridgeUrl
on component create, linking to the above page. - Use this component as a normal popup, in a way that works (and continues to work) in other browsers, cross-domain.
With the above, the error No ack for postMessage xcomponent_init in 1000ms
is still thrown in IE.
Anyone able to see where I've gone wrong?
Thanks,
Sean
from zoid.
Hi @AlbinoDrought,
- You need to include post-robot.ie.js in your bridge page. Sample of bridge.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="/js/post-robot.ie.js"></script>
</body>
</html>
- Specify bridgeUrl on component create as below:
window.MyXcomponent = xcomponent.create({
url: "https://mydomain.com/popup",
bridgeUrl: "https://mydomain.com/bridge.html",
contexts: {
popup: true
},
dimensions: {
width: '770px',
height: '45%'
},
.....
})
It works well at my end (post-robot v8.0.14 and xcomponent v6.0.37).
HTH,
Ky
from zoid.
Related Issues (20)
- "Process is not defined" error in create-react-app project HOT 1
- window.xprops is undefined
- Error importing zoid
- prop is read-only after doing updateProp
- React zoid component not working? HOT 1
- Change URL after compile
- Get params from child to parent
- No way to set custom attributes on the `detect_close` IFrame HOT 3
- How to use zoid with Vue 3 HOT 1
- Uncaught Error: Request listener already exists for zoid_allow_delegate_foo on domain * for wildcard window[Bug] Bug report HOT 1
- Error when closing component: close is not a function HOT 1
- Secure Message Channel
- Uncatchable Errors when component is unmounted asynchronously HOT 1
- "Detected popup close" error when a user closes the popup window manually before render completes. HOT 1
- Bundle Size
- npmjs.com latest version is outdated HOT 1
- Uncaught Error: Unable to find global parent component window
- Minimalist example shows spinning window. HOT 2
- How do I pass attributes to the iframe? I need to pass 'allow="camera http://localhost:3000; microphone http://localhost:3000"' attribute to iframe. HOT 2
- Set title of created iframe
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zoid.