chore: 删除 iframe 示例页面

Sight-wcg · Oct 20, 2023 · 8b36a87 · 8b36a87
1 parent c5e4c71
commit 8b36a87
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 68 deletions.
diff --git a/app.js b/app.js
@@ -38,27 +38,20 @@ loadScript(layuijs, function () {
 
         $('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
 
-        const changeIframe = function () {
-          const frames = window.frames;
-          for (var i = 0; i < frames.length; i++) {
-            defaultHandler(frames[i]);
-          }
-        };
-
         if (!isAppearanceTransition) {
           defaultHandler();
-          changeIframe();
         } else {
           rippleViewTransition(isDark, function () {
             // 动画需要
             document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
             defaultHandler();
-            changeIframe();
           });
         }
       },
     });
 
+    routerTo({path: location.hash.slice(1) || 'view/button'});
+
     dropdown.render({
       elem: '#change-theme',
       align: 'center',
@@ -92,18 +85,6 @@ loadScript(layuijs, function () {
       },
     });
 
-    const path = location.hash.slice(1) || 'view/button';
-    const type = $(`[data-path='${path}']`).data('type');
-    loadView({
-      path,
-      type,
-      done() {
-        if (type === 'iframe') {
-          theme.setMode(theme.mode());
-        }
-      },
-    });
-
     util.event('lay-header-event', {
       menuLeft() {
         $('body').toggleClass('collapse');
@@ -121,17 +102,8 @@ loadScript(layuijs, function () {
 
     element.on('nav(nav-side)', function (elem) {
       var path = elem.data('path');
-      var type = elem.data('type');
       if (path) {
-        loadView({
-          path,
-          type,
-          done() {
-            if (type === 'iframe') {
-              theme.setMode(theme.mode());
-            }
-          },
-        });
+        routerTo({path});
         if ($(window).width() <= 768) {
           $('body').toggleClass('collapse', false);
         }
@@ -140,49 +112,28 @@ loadScript(layuijs, function () {
 
     $('#layuiv').text(layui.v);
 
-    function loadView({
-      elem = '#body-container',
+    function routerTo({
+      elem = '#router-view',
       path = 'view/button',
-      type,
       prefix = './docs/',
       suffix = '.html',
-      done,
     } = {}) {
-      var containerDom = $(elem);
+      var routerView = $(elem);
       var url = prefix + path + suffix;
 
       var loadTimer = setTimeout(() => {
         layer.load(2);
       }, 100);
 
-      history.replaceState({}, '', '#' + path); // 因为并没有处理路由
-      if (type === 'iframe') {
-        var iframeEl = $('<iframe>')
-          .attr('src', url)
-          .css({ width: '100%', height: '90vh', border: 'none' })
-          .hide()
-          .on('load', function () {
-            //clearTimeout(loadTimer);
-            done && done();
-            setTimeout(() => {
-              layer.closeLast('loading');
-              iframeEl.show();
-            }, 100);
-          });
-        containerDom.html(iframeEl);
-      } else {
-        $.ajax({
-          url: url,
-          dataType: 'html',
-        }).done(function (res) {
-          containerDom.html(res);
-          done && done();
-          element.render();
-          form.render();
-          clearTimeout(loadTimer);
-          layer.closeLast('loading');
-        });
-      }
+      history.replaceState({}, '', `#${path}`); // 因为并没有处理路由
+      routerView.attr('src', url)
+      routerView.off('load').on('load',function(){
+        element.render();
+        form.render();
+        clearTimeout(loadTimer);
+        layer.closeLast('loading');
+      })
+
       // 选中, 展开菜单
       $('#ws-nav-side')
         .find("[data-path='" + path + "']")
@@ -191,6 +142,7 @@ loadScript(layuijs, function () {
         .closest('.layui-nav-item')
         .addClass('layui-nav-itemed');
     }
+
   });
 });
 

diff --git a/docs/lib/include.js b/docs/lib/include.js
@@ -0,0 +1,130 @@
+/**
+ * @typedef {object} IncludeFile
+ * 
+ * @prop {boolean} ok
+ * @prop {number} status
+ * @prop {string} html
+ */
+
+/** @type {Map<string,IncludeFile | Promise<IncludeFile>>} */
+const includeFiles = new Map();
+
+/**
+ *
+ * @param {string} src
+ * @param {'cors' | 'no-cors' | 'same-origin'} [mode='cors']
+ * 
+ * @returns {Promise<IncludeFile>}
+ */
+export function requestInclude(src, mode = 'cors'){
+  const prev = includeFiles.get(src);
+  if (prev !== undefined) {
+    return Promise.resolve(prev);
+  }
+  const fileDataPromise = fetch(src, { mode: mode }).then(async response => {
+    const res = {
+      ok: response.ok,
+      status: response.status,
+      html: await response.text()
+    };
+    includeFiles.set(src, res);
+    return res;
+  });
+  includeFiles.set(src, fileDataPromise);
+  return fileDataPromise;
+}
+
+class HtmlImport extends HTMLElement {
+  constructor () {
+    super();
+  }
+
+  static get observedAttributes () {
+    return ['src', 'mode', 'allow-scripts'];
+  }
+
+  get src() {
+    return this.getAttribute('src') || '';
+  }
+
+  set src(value) {
+    this.setAttribute('src', value);
+  }
+
+  get mode() {
+    return this.getAttribute('mode') || 'cors';
+  }
+
+  set mode(value) {
+    this.setAttribute('mode', value);
+  }
+
+  get allowScripts() {
+    return this.hasAttribute('allow-scripts');
+  }
+
+  set allowScripts(value) {
+    this.toggleAttribute('allow-scripts', value);
+  }
+
+  /**
+   * 
+   * @param {HTMLScriptElement} script 
+   */
+  executeScript(script) {
+    const newScript = document.createElement('script');
+    [...script.attributes].forEach(attr => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode && script.parentNode.replaceChild(newScript, script);
+  }
+
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+
+      if (src !== this.src) {
+        return;
+      }
+
+      if (!file.ok) {
+        this.emit('error', { detail: { status: file.status } });
+        return;
+      }
+
+      this.innerHTML = file.html;
+
+      if (this.allowScripts) {
+        [...this.querySelectorAll('script')].forEach(script => this.executeScript(script));
+      }
+
+      this.emit('load');
+    } catch {
+      this.emit('error', { detail: { status: -1 } });
+    }
+  }
+
+  attributeChangedCallback (name) {
+    if (name == 'src') {
+      this.handleSrcChange();
+    }
+  }
+
+  emit(name, options) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {},
+      ...options
+    });
+
+    this.dispatchEvent(event);
+
+    return event;
+  }
+}
+
+if (!customElements.get('wc-include')) {
+  customElements.define('wc-include', HtmlImport);
+}
diff --git a/index.html b/index.html
@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width" />
     <title>layui-theme-dark</title>
     <style>
+      wc-include{
+        padding: 15px;
+        display: block;
+      }
       .layui-layout-right .layui-nav-bar {
         background-color: unset !important;
       }
@@ -60,6 +64,7 @@
         z-index: 9999;
       }
     </style>
+    <script type="module" src="./docs/lib/include.js"></script>
   </head>
 
   <body>
@@ -140,16 +145,13 @@
                 <dd><a data-path="view/xm-select" href="javascript:;">xm-select</a></dd>
               </dl>
             </li>
-            <li class="layui-nav-item">
-              <a data-type="iframe" data-path="view/iframe/iframe-test" href="javascript:;">iframe-1</a>
-            </li>
           </ul>
         </div>
       </div>
 
       <div class="layui-body">
         <!-- 内容主体区域 -->
-        <div id="body-container" style="padding: 15px"></div>
+        <wc-include id="router-view" allow-scripts></wc-include>
       </div>
 
       <!-- <div class="layui-footer">