Browse Source

[add][iframe 跳动问题]

zhangwei 2 years ago
parent
commit
5a95444ce7
3 changed files with 38 additions and 25 deletions
  1. 4 2
      src/logic/content/twitter.js
  2. 3 0
      src/uilts/sentry.js
  3. 31 23
      src/view/iframe/tool-box/card.vue

+ 4 - 2
src/logic/content/twitter.js

@@ -795,8 +795,9 @@ function setIframeRedPacket(type = 'twitter') {
                     } else if (item && item.post_Id && item.post_Id.indexOf('toolbox/') >= 0) {
                         item.page_type = 'toolbox'
                         item.post_Id = item.post_Id.split('toolbox/')[1] || ''
-                        // parseCard.replaceDomView(item)
-                        parseCard.replaceIframeToolBox(item)
+                        if (item.post_Id) {
+                            parseCard.replaceIframeToolBox(item)
+                        }
                     } else if (item && item.post_Id && !item.post_Id.includes('/')) {
                         item.page_type = '红包'
                         parseCard.replaceDOMRedPacket(item)
@@ -877,6 +878,7 @@ function initParseCard() {
                 if (queue_num <= 0) {
                     return
                 }
+                console.log('queue_num', queue_num)
                 initGroupTip()
                 setIframeRedPacket()
                 checkHasDeBtn()

+ 3 - 0
src/uilts/sentry.js

@@ -4,6 +4,9 @@ import { appVersionCode } from '@/http/configAPI.js'
 
 class CoutomSentry {
     initVue(app) {
+        if (process.env.NODE_ENV != 'production') {
+            return
+        }
         Sentry.init({
             app,
             dsn: "https://529fc1c357b248eda7473c119093f5db@sentry.piaoquantv.com/5",

+ 31 - 23
src/view/iframe/tool-box/card.vue

@@ -2,7 +2,7 @@
     <div class="denet-toolbox" :class="{ 'pre-view': pre_view }">
         <div class="head">
             <span></span>
-            <div v-show="state.show_btn && state.status == ''">
+            <div v-show="state.show_btn && state.status == 'iframe'">
                 <img :src="require('@/assets/svg/icon-iframe-fixed.svg')" alt class="fixed" @click="clickFixed" />
                 <img :src="require('@/assets/svg/icon-iframe-full.svg')" alt class="full" @click="clickFull" />
             </div>
@@ -11,11 +11,13 @@
             <iframe :src="iframe_url" frameborder="0"></iframe>
         </div>
         <div class="content" v-else>
-            <iframe :src="state.iframe_url" v-if="state.status == ''" ref="dom_iframe" frameborder="0" scrolling="yes"
+            <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"
                 allow="camera *;microphone *"></iframe>
             <!-- 网页错误 -->
-            <div class="state" v-if="state.status == '网页错误'">
-                <img :src="state.cover_url" alt="" class="cover">
+            <div class="state" v-show="state.status == '网页错误'">
+                <img :src="state.cover_url" alt="" class="cover" />
                 <div class="info">
                     <img :src="require('@/assets/svg/icon-iframe-error.svg')" alt />
                     <div>Oops, this link is invalid</div>
@@ -23,16 +25,19 @@
             </div>
 
             <!-- 加载 -->
-            <div class="state" v-if="state.status == '加载'">
-                <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="state.cover_url" alt="" class="cover" />
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
+                </div>
             </div>
 
             <!-- 关闭 -->
-            <div class="state" v-if="state.status == '关闭'">
+            <div class="state" v-show="state.status == '关闭'">
 
             </div>
             <!-- 固定右上角 -->
-            <div class="state" v-if="state.status == '固定右上角'">
+            <div class="state" v-show="state.status == '固定右上角'">
                 <div class="info">
                     <img :src="require('@/assets/svg/icon-iframe-pinned.svg')" alt />
                     <div class="pinned">Pinned to the top right</div>
@@ -66,7 +71,7 @@ let dom_iframe = ref(null)
 let state = reactive({
     status: '', //
     show_alert: false,
-    show_btn: true,
+    show_btn: false,
     list: [],
     checkbox: false,
     checkbox_id: `denet-${guid()}`,
@@ -93,10 +98,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     switch (req.actionType) {
         // 事件传输
         case 'Set_ToolBox_Fixed':
-
             if (req.data.tweetId == state.tweetId && req.data.type == '关闭') {
                 state.show_btn = true
-                state.status = ''
+                state.status = 'iframe'
                 state.iframe_url = req.data.iframe_url
             }
             break
@@ -129,12 +133,7 @@ onMounted(() => {
         if (res == state.tweetId) {
             state.status = '固定右上角'
         } else {
-            // state.tweetId == '1547587354935713792' || state.tweetId == '1547550675810525186' ||
-            // if (state.tweetId == '1547550154894745600') {
             getDetail()
-            // } else {
-            // state.status = '加载'
-            // }
         }
     })
 
@@ -142,11 +141,16 @@ onMounted(() => {
 
 // detail函数
 const getDetail = () => {
-    state.status = '加载'
     let iframe = dom_iframe.value
     iframe.onerror = () => {
         state.status = '网页错误'
     }
+    iframe.onload = () => {
+        if (state.status == '加载' || state.status == 'iframe') {
+            state.show_btn = true
+            state.status = 'iframe'
+        }
+    }
     getPostDetail({
         params: {
             postId: state.postId
@@ -157,10 +161,15 @@ const getDetail = () => {
             console.log('postBizData', state.detail)
             // 加载iframe
             state.cover_url = state.detail.linkImagePath
-            setTimeout(() => {
-                state.iframe_url = state.detail.convertUrl
-                state.status = ''
-            }, 1000)
+            // 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)
         } else {
             state.status = '网页错误'
         }
@@ -172,7 +181,7 @@ const clickCancel = () => {
 }
 
 const clickFixed = () => {
-    state.handle_type = '固定'
+    state.handle_type = '固定右上角'
     getChromeStorage('fullCheck', (res) => {
         if (res && res.fullCheck) {
             // 固定
@@ -189,7 +198,6 @@ const handleFull = () => {
         return
     }
     // 切换状态
-    state.status = '关闭'
     state.status = '固定右上角'
     state.show_btn = false
     sendChromeTabMessage({