askbot-dragon 1.6.22-beta → 1.6.23-beta

package/src/components/ActionAlertIframe.vue

@@ -1,155 +1,178 @@
-<template>
-    <div id="action_alert_iframe">
-        <div class="iframe-full-screen">
-                <span @click="showAskFullScreen = true" class="el-icon-full-screen"></span>
-            </div>
-        <iframe
-            class="grzh-iframe"
-            :id="tampId"
-            :data-name="tampId"
-            :src="actionAlertIframe.template"
-            :width="(actionAlertIframe.version == 1 && !phoneWidth100)?actionAlertIframe.width:'100%'"
-            :height="showAskFullScreen?'90%':actionAlertIframe.height"
-            :scrolling="actionAlertIframe.scrolling"
-            frameborder="no"
-            border="0"
-        ></iframe>
-        
-        <div v-if="showAskFullScreen" class="ask-full-screen">
-            <div class="iframe-full-screen">
-                <br>
-                <span @click="showAskFullScreen = false" style="cursor: pointer;">
-                    <svg t="1702295921525" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39588" width="20" height="20"><path d="M257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="39589"></path><path d="M896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333zM257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333zM343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333z" fill="#666666" p-id="39590"></path><path d="M343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="39591"></path></svg>
-                </span>
-            </div>
-            <iframe
-                class="grzh-iframe"
-                :src="actionAlertIframe.template"
-                width="100%"
-                height="95%"
-                :scrolling="actionAlertIframe.scrolling"
-                frameborder="no"
-                border="0"
-            ></iframe>
-        </div>
-    </div>
-    <!-- https://blog.csdn.net/qq_16992475/article/details/130633117 -->
-</template>
-<script>
-export default {
-    name: "action_alert_iframe",
-    props: ["actionAlertIframe", "phoneWidth100"],
-    data() {
-        return {
-            name: "action_alert_iframe",
-            dataName: "",
-            tampId:'',
-            // 组件接收数据
-            actionAlertIframeObj: {
-                template: "url地址(可插入变量)",
-                description: "描述",
-                height: "frame高度",
-                width: "iframe 的宽度",
-                scrolling: "yes/no/auto(是否在 iframe 中显示滚动条)",
-                sandbox: [
-                    "预留",
-                    "启用一系列对 <iframe> 中内容的额外限制",
-                    "参考 https://www.w3school.com.cn/tags/att_iframe_sandbox.asp",
-                ],
-                frameborder: "0/1(是否显示框架周围的边框)",
-                displayStyle:
-                    "iframe 样式(点击弹出/嵌入iframe 字符串类型后端未做限制)",
-            },
-            showAskFullScreen: false,
-        };
-    },
-    methods: {},
-    mounted() {
-        this.tampId = 'iframeId++' + new Date().getTime();
-        let tampUrl = this.actionAlertIframe.template;
-        function GetRequest() {
-            var url = tampUrl.split("?")[1]; //获取url中"?"符后的字串
-            var theRequest = new Object();
-            if (url) {
-                // var str = url.substr(1);
-                let strs = url.split("&");
-                for (var i = 0; i < strs.length; i++) {
-                    theRequest[strs[i].split("=")[0]] = unescape(
-                        strs[i].split("=")[1]
-                    );
-                }
-            }
-            return theRequest;
-        }
-        if (JSON.stringify(GetRequest()) == "{}") {
-          this.actionAlertIframe.template = this.actionAlertIframe.template  + "?iframeId=" + this.tampId
-        } else {
-          this.actionAlertIframe.template = this.actionAlertIframe.template  + "&iframeId=" + this.tampId
-        }
-        this.actionAlertIframe.template = this.actionAlertIframe.template.split("&amp;").join("&")
-    },
-};
-</script>
-<style lang="less" scoped>
-// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-#action_alert_iframe {
-    width: 100%;
-    margin: 0 auto;
-    overflow-x: auto;
-
-    .iframe-full-screen{
-        text-align: right;
-        padding-right: 12px;
-        .el-icon-full-screen{
-            cursor: pointer;
-        }
-    }
-
-    .ask-full-screen{
-        background-color: white;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        z-index: 9999999999999999999;
-    }
-    .grzh-iframe {
-        scrollbar-face-color: #9aa1c4;
-        /* 滚动条滑块按钮的颜色 */
-        scrollbar-highlight-color: #f60;
-        /* 滚动条整体颜色 */
-        scrollbar-3dlight-color: #f00;
-        scrollbar-darkshadow-color: #000;
-        /* 滚动条阴影 */
-        scrollbar-shadow-color: #000;
-        /* 三角箭头颜色 */
-        scrollbar-arrow-color: #394264;
-        /* 滚动条轨道颜色 */
-        scrollbar-track-color: #394264;
-
-        ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background-color: #999;
-            -webkit-border-radius: 5px;
-            border-radius: 5px;
-        }
-        ::-webkit-scrollbar-thumb:vertical:hover {
-            background-color: #666;
-        }
-        ::-webkit-scrollbar-thumb:vertical:active {
-            background-color: #333;
-        }
-        ::-webkit-scrollbar-button {
-            display: none;
-        }
-        ::-webkit-scrollbar-track {
-            background-color: #f1f1f1;
-        }
-    }
-}
+<template>
+    <div id="action_alert_iframe">
+        <div class="iframe-full-screen">
+                <span @click="showAskFullScreen = true" class="el-icon-full-screen"></span>
+            </div>
+        <iframe
+            class="grzh-iframe"
+            :id="tampId"
+            :data-name="tampId"
+            :src="actionAlertIframe.template"
+            :width="(actionAlertIframe.version == 1 && !phoneWidth100)?actionAlertIframe.width:'100%'"
+            :height="showAskFullScreen?'90%':actionAlertIframe.height"
+            :scrolling="actionAlertIframe.scrolling"
+            frameborder="no"
+            border="0"
+        ></iframe>
+        
+        <div v-if="showAskFullScreen" class="ask-full-screen">
+            <div class="iframe-full-screen">
+                <br>
+                <span @click="showAskFullScreen = false" style="cursor: pointer;">
+                    <svg t="1702295921525" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39588" width="20" height="20"><path d="M257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="39589"></path><path d="M896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333zM257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333zM343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333z" fill="#666666" p-id="39590"></path><path d="M343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="39591"></path></svg>
+                </span>
+            </div>
+            <iframe
+                class="grzh-iframe"
+                :src="actionAlertIframe.template"
+                width="100%"
+                height="90%"
+                :scrolling="actionAlertIframe.scrolling"
+                frameborder="no"
+                border="0"
+            ></iframe>
+        </div>
+    </div>
+    <!-- https://blog.csdn.net/qq_16992475/article/details/130633117 -->
+</template>
+<script>
+export default {
+    name: "action_alert_iframe",
+    props: ["actionAlertIframe", "phoneWidth100"],
+    data() {
+        return {
+            name: "action_alert_iframe",
+            dataName: "",
+            tampId:'',
+            // 组件接收数据
+            actionAlertIframeObj: {
+                template: "url地址(可插入变量)",
+                description: "描述",
+                height: "frame高度",
+                width: "iframe 的宽度",
+                scrolling: "yes/no/auto(是否在 iframe 中显示滚动条)",
+                sandbox: [
+                    "预留",
+                    "启用一系列对 <iframe> 中内容的额外限制",
+                    "参考 https://www.w3school.com.cn/tags/att_iframe_sandbox.asp",
+                ],
+                frameborder: "0/1(是否显示框架周围的边框)",
+                displayStyle:
+                    "iframe 样式(点击弹出/嵌入iframe 字符串类型后端未做限制)",
+            },
+            showAskFullScreen: false,
+        };
+    },
+    methods: {},
+    mounted() {
+        this.tampId = 'iframeId++' + new Date().getTime();
+        let tampUrl = this.actionAlertIframe.template;
+        function GetRequest() {
+            var url = tampUrl.split("?")[1]; //获取url中"?"符后的字串
+            var theRequest = new Object();
+            if (url) {
+                // var str = url.substr(1);
+                let strs = url.split("&");
+                for (var i = 0; i < strs.length; i++) {
+                    theRequest[strs[i].split("=")[0]] = unescape(
+                        strs[i].split("=")[1]
+                    );
+                }
+            }
+            return theRequest;
+        }
+        if (JSON.stringify(GetRequest()) == "{}") {
+          this.actionAlertIframe.template = this.actionAlertIframe.template  + "?iframeId=" + this.tampId
+        } else {
+          this.actionAlertIframe.template = this.actionAlertIframe.template  + "&iframeId=" + this.tampId
+        }
+        this.actionAlertIframe.template = this.actionAlertIframe.template.split("&amp;").join("&")
+
+        // 监听回退事件
+        let _that = this;
+
+        (function () {
+            console.log(95, 'addEventListener window.onpopstate');
+            if (window.history && window.history.pushState) {
+                console.log(97, 'window.history && window.history.pushState');
+                window.onpopstate = function (e) {
+                    console.log(9999, 'window.onpopstate innner', e);
+                    if (_that.showAskFullScreen) {
+                        window.history.go(1);
+                    }
+                    // window.history.pushState('forward', null, '');
+                    // window.history.forward(1);
+                    _that.showAskFullScreen = false;
+                    if ( e && e.stopPropagation ) {
+                        console.log(105, 'e.stopPropagation');
+                        e.stopPropagation();
+                    }
+                };
+            }
+        })();
+    },
+};
+</script>
+<style lang="less" scoped>
+// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+#action_alert_iframe {
+    width: 100%;
+    margin: 0 auto;
+    overflow-x: auto;
+
+    .iframe-full-screen{
+        text-align: right;
+        padding-right: 12px;
+        .el-icon-full-screen{
+            cursor: pointer;
+        }
+    }
+
+    .ask-full-screen{
+        background-color: white;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 9999999999999999999;
+    }
+    .grzh-iframe {
+        scrollbar-face-color: #9aa1c4;
+        /* 滚动条滑块按钮的颜色 */
+        scrollbar-highlight-color: #f60;
+        /* 滚动条整体颜色 */
+        scrollbar-3dlight-color: #f00;
+        scrollbar-darkshadow-color: #000;
+        /* 滚动条阴影 */
+        scrollbar-shadow-color: #000;
+        /* 三角箭头颜色 */
+        scrollbar-arrow-color: #394264;
+        /* 滚动条轨道颜色 */
+        scrollbar-track-color: #394264;
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background-color: #999;
+            -webkit-border-radius: 5px;
+            border-radius: 5px;
+        }
+        ::-webkit-scrollbar-thumb:vertical:hover {
+            background-color: #666;
+        }
+        ::-webkit-scrollbar-thumb:vertical:active {
+            background-color: #333;
+        }
+        ::-webkit-scrollbar-button {
+            display: none;
+        }
+        ::-webkit-scrollbar-track {
+            background-color: #f1f1f1;
+        }
+    }
+}
 </style>