feat(pages): improve page loader

Author: WittBulter

examples/main.ts

@@ -4,8 +4,8 @@ document.title = 'hello'
 const handler = async() => {
    const backLoader = new BackLoader({
      // scripts: ['https://code.jquery.com/jquery-3.2.1.slim.min.js'],
-     // pages: ['https://google.com'],
-     images: ['https://www.bing.com/az/hprichbg/rb/TadamiTrain_ROW14602114613_1920x1080.jpg'],
+     pages: ['https://napos-care-plan.faas.ele.me/#/h5/board'],
+     // images: ['https://www.bing.com/az/hprichbg/rb/TadamiTrain_ROW14602114613_1920x1080.jpg'],
    })
   backLoader.start().on(event => {
     console.log(event)

src/core/loader.ts

@@ -1,6 +1,6 @@
 import { EventHub } from './event'
 import { LoaderEvent } from '../types'
-import { $fetch, filterResources, listenImageLoad } from '../utils/tools'
+import { $fetch, hiddenIframe, listenImageLoad } from '../utils/tools'
 
 
 export class Loader {
@@ -22,16 +22,9 @@ export class Loader {
 
   pages(urls: string[]): void {
     urls.forEach(url => {
-      $fetch(url, { mode: 'no-cors' })
-      .then(html => {
-        this.scripts(filterResources(html, 'script'))
-        this.styles(filterResources(html, 'style'))
-      })
-      .catch((e) => {
-        this.emit(Object.assign({}, this.baseEvent, {
-          type: 'page', source: url, success: false,
-        }))
-      })
+      const iframe: HTMLIFrameElement = document.createElement('iframe')
+      iframe.src = url
+      document.body.appendChild(hiddenIframe(iframe))
     })
   }
 

src/utils/tools.ts

@@ -33,16 +33,15 @@ export const filterResources = (source: string, type: string): string[] => {
 export const listenImageLoad = (images: HTMLImageElement[], done: (url: string) => void)
 : void => {
   images.forEach(img => img.onload = () => done(img.src))
-  // const isCompleted = (imgs: HTMLImageElement[]) => !imgs.length
-  // const timer: number = window.setInterval(() => {
-  //
-  //   // images = images.map(img => {
-  //   //   console.log(img)
-  //   //   if (!img.complete) return img
-  //   //   done(img.src)
-  //   //   return null
-  //   // })
-  //   // .filter(v => !!v)
-  //   isCompleted(images) && clearInterval(timer)
-  // }, 300)
+}
+
+export const hiddenIframe = (iframe: HTMLIFrameElement): HTMLIFrameElement => {
+  iframe.style.opacity = '0'
+  iframe.style.position = 'fixed'
+  iframe.style.top = '-20000px'
+  iframe.style.left = '-20000px'
+  iframe.style.zIndex = '-100'
+  iframe.style.width = '1px'
+  iframe.style.height = '1px'
+  return iframe
 }