xcomponent web 跨域组件介绍

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