活动项目各种端自动设配方案

未分类

方案：监视网页是否在pc端打开。pc端打开页面将网页嵌套在iframe中展示。

具体代码如下：

(function() {
    let isPC = function ()
    {
        let userAgentInfo = navigator.userAgent.toLowerCase();
        let Agents = new Array("android", "iphone", "symbianOS", "windows phone", "ipad", "ipod");
        for (let v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {  return false } else {
                return true
            }
        }
    }
    if(isPC()){
        let html = document.getElementsByTagName('html')[0];
        let body = document.getElementsByTagName('body')[0];
        let app = document.getElementById('app');
        let getRandomColor=()=> {
            let bgcColor =['#C2FFD8','#465EFB','#F97794','#92FFC0','#002661','#F0FF00','#FFA8A8']
            function  randomColor(){
                return bgcColor[Math.floor(Math.random()*bgcColor.length)]
            }
            return `linear-gradient(to bottom right, ${randomColor()} , ${randomColor()})`
        };
        html.setAttribute('style', 'width: 100%; height: 100%;')
        body.setAttribute('style', `width: 100%; height: 100%; background: ${getRandomColor()}`)
        app.setAttribute('style', 'display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;')
        app.innerHTML=`<iframe src=${window.location.href} style="height: 90%; width: 32%"></iframe>`;
    }
})();

效果如下：