[关闭]
@1002522146 2019-05-24T08:03:25.000000Z 字数 1072 阅读 374

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

未分类


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

具体代码如下:

  1. (function() {
  2. let isPC = function ()
  3. {
  4. let userAgentInfo = navigator.userAgent.toLowerCase();
  5. let Agents = new Array("android", "iphone", "symbianOS", "windows phone", "ipad", "ipod");
  6. for (let v = 0; v < Agents.length; v++) {
  7. if (userAgentInfo.indexOf(Agents[v]) > 0) { return false } else {
  8. return true
  9. }
  10. }
  11. }
  12. if(isPC()){
  13. let html = document.getElementsByTagName('html')[0];
  14. let body = document.getElementsByTagName('body')[0];
  15. let app = document.getElementById('app');
  16. let getRandomColor=()=> {
  17. let bgcColor =['#C2FFD8','#465EFB','#F97794','#92FFC0','#002661','#F0FF00','#FFA8A8']
  18. function randomColor(){
  19. return bgcColor[Math.floor(Math.random()*bgcColor.length)]
  20. }
  21. return `linear-gradient(to bottom right, ${randomColor()} , ${randomColor()})`
  22. };
  23. html.setAttribute('style', 'width: 100%; height: 100%;')
  24. body.setAttribute('style', `width: 100%; height: 100%; background: ${getRandomColor()}`)
  25. app.setAttribute('style', 'display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;')
  26. app.innerHTML=`<iframe src=${window.location.href} style="height: 90%; width: 32%"></iframe>`;
  27. }
  28. })();

效果如下:

WeChat6976aad97c74e468b382218aa7ef90b3.png-431.5kB

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注