Knighthana
Knighthana
文章96
标签139
分类7
回到首页
文章归档
关于本站

文章分类

文章归档

最新文章

© 2024 Knighthana Powered by Hexo & Nexmoe
前端小打闹

前端小打闹

2024年12月16日 Dev-Code

前端小打闹

玩转哔哩哔哩外链播放器

哔哩哔哩提供了外链播放器的iframe，用来在站外播放视频

可以在站外(外链)播放器使用文档找到它

在这个基础上，我搞出了一个自用的版本，放在了自用哔哩哔哩外链播放器 - 代码存档里

为什么要演奏春日影！

哪来的柚子厨

哪来的柚子厨滚出克！

打开一个实际上在文件目录中不存在的网页

在这个代码示例中，我存档了如何在单个网页中使用脚本渲染出另一个网页，主要是应用了这个方法：

1
let newTab = window.open();

在代码中我实际上使用的是window.open('','_blan');，这表示在新标签页中打开一个空白网页；

然而我在代码中的一些操作，让这个新网页有了一些不同：

1
newTab.document.write();

虽然这个document.write()方法已经不被推荐使用了

在新打开的网页中插入脚本

要实现这个目的，可以用这样的方法：

1
2
let script = newTab.document.createElement('script');
script.text = 'fetch("https://api64.ipify.org?format=json") .then(response => response.json()) .then(data => {document.getElementById("ip-address").textContent = data.ip;}) .catch(error => console.error("Error:", error))';

script的text对象的内容实际上是类似这样的函数： 

1
2
3
4
5
6
7
8
9
10
11
12
13
function get_clientIP() {
    let clientIP = 'Unknown';
    fetch('https://api64.ipify.org?format=json')
    .then(response => response.json())
    .then(data => {
        clientIP = data.ip.toString();
    })
    .catch(error => {
        console.error('Error:', error);
        clientIP = "error";
    });
    return clientIP;
}

只不过相较于return，它将data.ip直接写到了指定的元素中

感谢ipify - A Simple Public IP Address API提供的API

提前占位

在测试页面的时候发现了一个问题，那就是每次等待远端返回IP查询情况时，网页没有为空的<p>标签渲染换行，这导致在一小段时间远端传输回查询结果之后，新出现的文段向下挤压了网页的其余部分，效果十分难看

于是我就在<p>与</p>之间插入了一个<br/>，用来提前占位，如是操作之后整张网页在逐渐加载的动态过程中也显得比较平稳

_

Knighthana

2024/12/16

×