网页上简单调用bilibili视频，点击后才加载这样省流量｜[html]预览功能添加在新窗口预览

咯叽

@Ta 1天前发布，1天前修改 249点击

<v src="BV1qx411Y7Wd"></v>

<v src="BV1ys411Z7T1"></v>

html部分只需要 BVxxx 号就行了↑

<script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('v').forEach(vTag => {
        let src = vTag.getAttribute('src');
        src = '//player.bilibili.com/player.html?&bvid=' + src;
        const config = {
          src: src,
          width: vTag.style.width || '100%',
          height: vTag.style.height || '30vh'
        };
        const btn = document.createElement('button');
        btn.innerHTML = '点击加载视频';
        Object.assign(btn.style, {
     width:'100%',height:'30vh'
        });
        btn.onclick = () => {
          replaceWithIframe(vTag, config);
        };
        vTag.appendChild(btn);
        vTag.style.position ='relative';
      });
    });

    function replaceWithIframe(originTag, { src, width, height }) {
      const iframe = document.createElement('iframe');
      iframe.src = src;
      iframe.style = `width:${width}; height:${height}; border:none;`;
      originTag.parentNode.replaceChild(iframe, originTag);
      window.dispatchEvent(new CustomEvent('iframe-loaded', {
        detail: { url: src }
      }));
    }
  </script>

效果视频：

视频链接：screen-20250424-101638_6045.mp4（10.17 MB）

hu60不支持这段示例使用[ html ]预览，不知道[ html ]预览可不可以添加个功能，除了可以点击 HTML代码查看[ html ]包裹的代码，还有个按钮可以创建个空白新窗口，这个空白新窗口只有要预览运行的那个[ html ]包裹的内容。

HTML代码

导入网页插件：在新窗口预览html内容（当前用户：0，总安装次数：0）

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取目标 <a> 元素
    const targetLink = document.querySelector('a.useriframelink');
    if (!targetLink) return;

    // 创建按钮元素
    const previewBtn = document.createElement('button');
    previewBtn.textContent = '新窗口预览';
    previewBtn.style.cssText = 'margin-left: 10px; cursor: pointer;';

    // 在 <a> 元素后面插入按钮
    targetLink.insertAdjacentElement('afterend', previewBtn);

    // 解码 HTML 实体的函数
    const decodeEntities = (html) => {
        const txt = document.createElement('textarea');
        txt.innerHTML = html;
        return txt.value;
    };

    // 点击事件处理
    previewBtn.addEventListener('click', () => {
        const iframe = document.querySelector('.useriframe');
        if (!iframe) return;

        // 解码 srcdoc 内容
        const decodedContent = decodeEntities(iframe.srcdoc);

        // 创建新窗口
        const newWindow = window.open('', 'Preview', 'width=800,height=600');
        if (!newWindow) {
            alert('请允许弹出窗口');
            return;
        }

        // 写入解码后的内容
        newWindow.document.open();
        newWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>预览</title>
                <base target="_blank">
                <style>body { margin: 10px }</style>
            </head>
            <body>${decodedContent}</body>
            </html>
        `);
        newWindow.document.close();
    });
});
</script>

效果视频：

视频链接：screen-20250424-111730.mp4（3.42 MB）