zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    学到的一些函数和好的方法
    MVC 捋一遍(3)
    MVC 捋一遍(2)
    mvc 安装ef遇到的各种奇葩问题
    MVC 捋一遍(1)
    httpServletRequest.getCharacterEncoding()取出来是个null,怎么办?
    spring常用注解
    覆盖io.spring.platform管理的版本号
    下拉点击跳到指定链接(类同友情链接)
    EditPlus 3.7激活码注册码
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/7797738.html
Copyright © 2011-2022 走看看