在 html 中嵌入本地 asciinema 文件

如何解决在 html 中嵌入本地 asciinema 文件

我正在尝试在 html 中嵌入本地 asciinema 会话。这是我的目录布局：

import java.util.Scanner;
public class PanCard 
{

    public static void main(String[] args) 
    { 
        Scanner sc = new Scanner(system.in);
        System.out.println("Enter the PAN no: "); // char [] pan=sc.nextLine().tochararray();
        String str = sc.nextLine();
        if(str.matches ("[A-Z]{5}[0-9]{4}[A-Z]{1}"))
        {
            System.out.println("Valid PAN no");
        }
        else
        {
            System.out.println("Invalid PAN no");
        }
    }
}

这是我的 html 文件，就像 here 中所说：

$ tree
.
├── asciinema
│   └── demo.cast
├── css
│   └── asciinema-player.css
├── index.html
├── js
│   └── asciinema-player.js
└── makefile

当我将此文件拖放到 Mozilla 时，它只显示 $ cat index.html <html> <head> <link rel="stylesheet" type="text/css" href="/css/asciinema-player.css" /> </head> <body> ABCDE <asciinema-player src="/asciinema/demo.cast"></asciinema-player> <script src="/js/asciinema-player.js"></script> </body> </html>

解决方法

主要问题是您试图运行一个脚本，该脚本使用 XMLHttpRequest 作为浏览器中的本地 HTML 文件。如果您打开浏览器控制台，您会看到它在尝试查找所有 src/href 标签中的文件时出错。您可以通过从每个 //src 中删除起始 href 来解决这个问题，播放器将加载，但是当脚本尝试加载您的演员表时，您会遇到 CORS 问题文件。

解决方案是使用 HTTP 服务器来托管您的演员表文件，这样您就可以通过完整的服务器路径直接引用它们，例如 http://localhost:3000/asciinema/demo.cast。或者，如果外部网站未启用 CORS，您也可以仅使用外部 URL 来作为转换文件。示例：

<asciinema-player src="https://asciinema.org/a/28307.cast"></asciinema-player>

现在您可以选择哪种 HTTP 服务器，有许多非常简单的服务器是用每种可能的编程语言制作的。如果您熟悉 Node/JavaScript，那么 http-server 就可以。如果您熟悉 Python，那么 simplehttpserver 也可以。试试你觉得舒服的任何一种。

另一个“解决方案”是在浏览器中禁用 CORS。但那样你只是在冒着风险，这也只是一个廉价的黑客。

TL;DR：由于 CORS，您无法在本地 HTML 文件中加载本地转换文件。您需要在本地或外部 HTTP 服务器上托管您的演员表。

有一个 workaround，不过，如果您真的想将其全部放在您的 PC 上。那是通过将 asciicast 文件内联到 src 属性中来将其嵌入到 HTML 页面中。您可以通过将 demo.cast 文件（JSON 文件）转换为单个 Base64 编码行来实现。

用 demo.cast 转换 base64 -w 0 demo.cast 文件。您需要以某种方式捕获该输出，以便随后将其粘贴到 HTML 文件中。例如，将其通过管道传输到文本文件中，或直接将其附加到 HTML 文件的末尾，然后围绕它处理其余的 HTML。

然后像这样写你的 asciinema-player 行：

<asciinema-player src="data:application/json;base64,BASE_64_ENCODED_STRING_HERE" />

例如：

<asciinema-player src="data:application/json;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogMTQwL" />

在 html 中嵌入本地 asciinema 文件

如何解决在 html 中嵌入本地 asciinema 文件

解决方法

相关推荐