feat(closable iframe): iframe closeable

Author: Littleor

src/utils/common.ts

@@ -11,8 +11,8 @@ import { Provider } from '../provider'
 /**
  * Check the window width to decide whether to show in full screen
  */
-export const isPhone = () => {
-  return window.screen.width < 500
+export const isFullScreen = () => {
+  return window.innerWidth < 500
 }
 
 /**
@@ -34,6 +34,88 @@ export interface IIframeOptions {
   waitResult?: boolean
 }
 
+export const getIframe = async (
+  url: string,
+  onClose: () => void
+): Promise<HTMLDivElement> => {
+  const div = document.createElement('div')
+  const iframe = document.createElement('iframe')
+  const button = document.createElement('div')
+  const style = document.createElement('style')
+  style.innerHTML = `  .iframe-contain {
+    position: fixed;
+    background: #FFFFFF;
+    border: 1px solid #EAEAEA;
+    z-index: 999999999;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+    width: 414px;
+    height: 736px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+  }
+
+  .iframe {
+    border-radius: 15px;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .iframe-contain-button {
+    border-radius: 9px;
+    background: rgba(130, 138, 147, 0.5);
+    width: 18px;
+    height: 18px;
+    z-index: 2;
+    position: absolute;
+    top: ${isFullScreen() ? '0' : '-9px'};
+    right: ${isFullScreen() ? '0' : '-9px'};
+    cursor: pointer;
+  }
+
+  .iframe-contain-button:before {
+    position: absolute;
+    content: '';
+    width: 2px;
+    height: 12px;
+    background: black;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%)  rotate(45deg);
+  }
+
+  .iframe-contain-button:after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 12px;
+    background: black;
+    transform: translate(-50%, -50%)  rotate(-45deg);
+    top: 50%;
+    left: 50%;
+  }
+`
+  div.className = 'iframe-contain'
+  button.className = 'iframe-contain-button'
+  iframe.className = 'iframe'
+  div.id = 'anyweb-iframe-contain'
+  div.style.width = isFullScreen() ? '100%' : '414px'
+  div.style.height = isFullScreen() ? '100%' : '736px'
+  iframe.setAttribute('src', url)
+  iframe.setAttribute('frameborder', '0')
+  iframe.setAttribute('scrolling', 'none')
+  div.insertBefore(iframe, div.firstElementChild)
+  div.insertBefore(button, div.firstElementChild)
+  button.onclick = () => {
+    onClose()
+    div.remove()
+  }
+  document.body.appendChild(style)
+  document.body.insertBefore(div, document.body.firstElementChild)
+  return div
+}
 export const callIframe = async (
   path: string,
   {
@@ -45,18 +127,9 @@ export const callIframe = async (
     waitResult = true,
   }: IIframeOptions
 ) => {
-  const hash = sha512(JSON.stringify({ appId, params }))
-  const iframe = document.createElement('iframe')
   let serialNumber = ''
-  iframe.style.width = isPhone() ? '100%' : '414px'
-  iframe.style.height = isPhone() ? '100%' : '736px'
-  iframe.style.position = 'fixed'
-  iframe.style.top = '50%'
-  iframe.style.left = '50%'
-  iframe.style.zIndex = '9999'
-  iframe.style.transform = 'translate(-50%, -50%)'
-  iframe.style.background = 'white'
-  iframe.id = 'anyweb'
+  const hash = sha512(JSON.stringify({ appId, params }))
+
   try {
     serialNumber = (
       await axios.post(`${API_BASE_URL}/open/serial/create`, {
@@ -67,18 +140,23 @@ export const callIframe = async (
     console.error('Get serialNumber error', e)
     throw new Error('Get serialNumber error')
   }
-  iframe.setAttribute(
-    'src',
-    `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
-      Math.random() * 1000
-    )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`
-  )
-  document.body.insertBefore(iframe, document.body.firstElementChild)
   if (waitResult) {
     return new Promise<unknown>(async (resolve, reject) => {
+      let timer: NodeJS.Timeout | undefined = undefined
+      const iframeContain = await getIframe(
+        `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
+          Math.random() * 1000
+        )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
+        () => {
+          if (timer) {
+            clearTimeout(timer)
+            reject(new Error('User cancel'))
+          }
+        }
+      )
       const delay = 800
       const next = (i: number) => {
-        const timer = setTimeout(async () => {
+        timer = setTimeout(async () => {
           try {
             const data = (
               await axios.post(`${API_BASE_URL}/open/serial/read`, {
@@ -87,13 +165,13 @@ export const callIframe = async (
               })
             ).data.data
             if (data && data !== 'false' && data !== false) {
-              clearTimeout(timer)
-              document.getElementById('anyweb')?.remove()
+              timer && clearTimeout(timer)
+              iframeContain.remove()
               resolve(JSON.parse(data))
             } else {
               if (i * delay > 10 * 60 * 1000) {
-                document.getElementById('anyweb')?.remove()
-                reject('time out')
+                iframeContain.remove()
+                reject(new Error('Timeout'))
               }
               next(i++)
             }