[edit][sandbox]

src/view/iframe/tool-box/card.vue

@@ -11,10 +11,12 @@
             <iframe :src="iframe_url" frameborder="0"></iframe>
         </div>
         <div class="content" v-else>
-            <iframe :src="state.iframe_url" v-show="state.status == 'iframe'" ref="dom_iframe" frameborder="0"
-                scrolling="yes"
-                sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation allow-forms allow-modals allow-popups-to-escape-sandbox"
+            <div ref="dom_area_iframe" v-show="state.status == 'iframe'" class="area-iframe">
+
+            </div>
+            <iframe src="https://www.twitter.com" ref="dom_iframe" frameborder="0" scrolling="yes"
                 allow="camera *;microphone *"></iframe>
+
             <!-- 网页错误 -->
             <div class="state" v-show="state.status == '网页错误'">
                 <img :src="state.cover_url" alt="" class="cover" />
@@ -67,7 +69,7 @@ import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage }
 import { getPostDetail } from '@/http/redPacket.js'
 import { guid, getQueryString } from "@/uilts/help";
 import { onMounted, reactive, ref } from "vue";
-let dom_iframe = ref(null)
+let dom_area_iframe = ref(null)
 let state = reactive({
     status: '', //
     show_alert: false,
@@ -78,7 +80,8 @@ let state = reactive({
     postId: '',
     tweetId: '',
     detail: {},
-    handle_type: ''
+    handle_type: '',
+    iframe_sandbox: ''
 })
 
 let dom = {}
@@ -138,10 +141,14 @@ onMounted(() => {
     })
 
 })
+let area_iframe
 
-// detail函数
-const getDetail = () => {
-    let iframe = dom_iframe.value
+const createIframe = () => {
+    area_iframe = dom_area_iframe.value
+    if (area_iframe.querySelector('iframe')) {
+        return
+    }
+    let iframe = document.createElement('iframe')
     iframe.onerror = () => {
         state.status = '网页错误'
     }
@@ -151,6 +158,16 @@ const getDetail = () => {
             state.status = 'iframe'
         }
     }
+    // if (state.detail.urlInBlacklist) {
+    //     iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-top-navigation allow-forms allow-modals allow-popups-to-escape-sandbox allow-presentation"
+    // }
+    // state.detail.convertUrl
+    iframe.src = 'https://www.twitter.com'
+    area_iframe.appendChild(iframe)
+}
+
+// detail函数
+const getDetail = () => {
     getPostDetail({
         params: {
             postId: state.postId
@@ -161,15 +178,9 @@ const getDetail = () => {
             console.log('postBizData', state.detail)
             // 加载iframe
             state.cover_url = state.detail.linkImagePath
-            // state.cover_url = 'https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg'
+            // state.cover_url = 'https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg'  
             state.status = '加载'
-            state.iframe_url = state.detail.convertUrl
-            // state.detail.urlInBlacklist
-            // state.iframe_url = 'https://www.baidu.com'
-            // setTimeout(() => {
-
-            // state.status = ''
-            // }, 1000)
+            // createIframe()
         } else {
             state.status = '网页错误'
         }
@@ -392,13 +403,20 @@ const clickFull = () => {
         align-items: center;
         justify-content: center;
 
-        iframe {
-            background: #fff;
+        .area-iframe {
             width: 100%;
-            height: 504px;
-            border: medium none;
+            height: 100%;
+
+            iframe {
+                background: #fff;
+                width: 100%;
+                height: 100%;
+                border: medium none;
+            }
         }
 
+
+
         .state {
             text-align: center;
             width: 100%;