1. 项目地址:
https://github.com/krakenjs/xcomponent
2. 支持的特性
a. Render an iframe or popup on a different domain, and pass down props, including objects
and functions
b. Call callbacks natively from the child window without worrying about post-messaging or
cross-domain restrictions
c. Create and expose components to share functionality from your site to others!
3. 简单使用
// Define a component:
var MyLoginComponent = xcomponent.create({ tag: 'my-login-component',
url: 'http://www.my-site.com/my-login-component'
});
// Render the component on the parent page:
MyLoginComponent.render({ prefilledEmail: 'foo@bar.com', onLogin: function(email) {
console.log('User logged in with email:', email);
}}, '#container');//Implement the component in the iframe:<input type="text" id="email" />
<input type="password" id="password" />
<button id="login">Log In</button><script>
var email = document.querySelector('#email');
var password = document.querySelector('#password');
var button = document.querySelector('#login'); email.value = window.xprops.prefilledEmail; button.addEventListener('click', function() {
if (validUser(email.value, password.value)) {
window.xprops.onLogin(email.value);
}
});
</script>
4. 参考资料
https://github.com/krakenjs/xcomponent
https://github.com/krakenjs/xcomponent/blob/master/docs/api.md