是否可以缩短数据：text/html、link？

Question

我一直在编写一个名为 data:text/html 的 link，（如果你把它写在地址栏中，你可以写任何 html 和 css after.) 有谁知道如何缩短这个 link，我试过 goo.gl 和一点点，但它说它无法创建 link。这是我的代码：

data:text/html, <!DOCTYPE html> <html lang="en-us"> <head> <title>Griffin Inc</title> <link rel="icon" href="https://docs.google.com/a/my.rbusd.org/drawings/d/1RbhLPr2Jq2WL-NCKn0lMKVkM3fPw-ZRUdFTurpLHkBk/pub?w=960&h=720"> <link href="https://preview.c9users.io/check222/new-tab/style.css" rel="stylesheet"> <script src="https://preview.c9users.io/check222/new-tab/main.js"></script> </head> <body id="body"> <marquee loop="-1" scrollamount="7" width="100%" id="google-search-engine-marquee"> <strong>Search Griffin Inc</strong> </marquee> <form action="https://www.google.com/search" method="get"> <input type="search" name="q" placeholder="Google" title="Search" id="search-bar"> <input type="submit" value="Search" id="search-button"> </form><p style="color: black">Color Picker:<input id="color_picker" type="color" onchange="showHex();"><p style="color: black">Type notes here: </p> <textarea id="notes"></textarea> <p></p> <button id="Google-Docs" class="pageContent" onclick="window.open('https://docs.google.com/document/u/0/?tgif=d')">Google Docs</button> <button id="Google-Drive" class="pageContent" onclick="window.open('https://drive.google.com/drive/my-drive')">Google Drive</button> <button id="Google-Slides" class="pageContent" onclick="window.open('https://docs.google.com/presentation/u/0/?tgif=d')">Google Slides</button> <button id="Google-Drawings" class="pageContent" onclick="window.open('https://docs.google.com/drawings/d/1YTlXmt29AVduvI2OnSfYYMKw1IrcB3LPFPBh6g1p6TI/edit')">Google Drawings</button> <iframe src="http://schneider7.weebly.com/homework--due-dates" width="100%" height="1000"/> </body> </html>

Answer 1

Is it possible to shorten a data:text/html, link?

当然可以 — 如果您可以创建一个短的 URL 重定向到所述数据 URI。正如您所观察到的，许多流行的服务不支持数据 URI。但是，没有什么能阻止您进行自己的重定向。

缩短数据 URI 有用吗？我想不出这样做有任何合理的用例。 data:text/html URI 用于非常小的演示（按两位或三位字节数的顺序 - 这里是 couple of ）和快速实验。头脑正常的人不会将整个 HTML 文档放在数据 URI 中，并期望最终用户像使用真实文档一样使用它。至关重要的是，数据 URI 不能被搜索引擎编入索引，当然这取决于用例，这可能是有利的也可能是不利的。

此外，，所以即使您可以创建一个简短的 URL 重定向到数据 URI，它也不会在任何地方都有效。

如果您想要 "short URLs" link 到 runnable/editable 的网页片段，有大量专门为此目的而提供的服务，例如 JSFiddle, JS Bin, CodePen...名单还在继续。这些都生成具有相当短标识符的 URLs。此外，它们都是基于 HTTP 的，因此可以在 IE 和 Microsoft Edge 中使用。

Answer 2

它有点……但它不会对你有多大好处，至少如果你想通过它“传输”一个完整的 HTML 文件的话 - 因为不是所有的浏览器都会允许这个。

试试下面的例子：tinyurl.com/3maue6t

它将重定向到
data:text/html;charset=utf-8,However,%20data%20URI%20does%20the%20same%20without%20the%20server

（不是我的示例；在 https://news.ycombinator.com/item?id=2464213 after googling does any url shortener support data uris 上找到）

但是，如果您在 Chrome 中导航到上面的 tinyurl，您将看到以下错误消息：

This site can’t be reached

The webpage at data:text/html;charset=utf-8,However,%20data%20URI%20does%20the%20same%20without%20the%20server might be temporarily down or it may have moved permanently to a new web address.

ERR_UNSAFE_REDIRECT

所以这被阻止了，因为它被认为是不安全的。我预计其他主要浏览器可能会以类似的方式做出反应。

证明这不是由于某种“错误”的数据 URI 很容易 - 地址栏现在显示数据 URI，所以将光标移到它后面并点击 [enter] - 你会看到“ HTML" 将呈现此数据 URI 包含的文档。

我没有检查过如果你 f.e 事情是否会受到不同对待。使用这样一个缩短的 URL 重定向到数据 URI 作为图像元素或其他类型的嵌入式资源的 src；但是作为一个“重定向”到一个完整网页的工具，它似乎并不合适。

Answer 3

从这里尝试 react-google-url-shortner：https://www.npmjs.com/package/react-google-url-shortner。

道具：

url（必填）- 添加要缩短的 url。
GOOGLE_API_KEY - Api 从 google 项目创建的密钥。

用法：

import GoogleUrlShortner from 'react-google-url-shortner';

// ... 

class Foo extends Component {
    render() {
        return (
            <GoogleUrlShortner
              url="{example url here}" 
              GOOGLE_API_KEY="{YOUR project API key here}"
            />
        );
    }
}

Answer 4

我知道这是旧的，这不是您可能想要的答案，但您可以使用 base 64 编码，例如

data:text/html;base64,PGgxPkhlbGxvLCBXb3JsZDwvaDE+

你的 HTML 可以编码成

data:text/html;base64,ZGF0YTp0ZXh0L2h0bWwsIDwhRE9DVFlQRSBodG1sPiA8aHRtbCBsYW5nPSJlbi11cyI+IDxoZWFkPiA8dGl0bGU+R3JpZmZpbiBJbmM8L3RpdGxlPiA8bGluayByZWw9Imljb24iIGhyZWY9Imh0dHBzOi8vZG9jcy5nb29nbGUuY29tL2EvbXkucmJ1c2Qub3JnL2RyYXdpbmdzL2QvMVJiaExQcjJKcTJXTC1OQ0tuMGxNS1ZrTTNmUHctWlJVZEZUdXJwTEhrQmsvcHViP3c9OTYwJmg9NzIwIj4gPGxpbmsgaHJlZj0iaHR0cHM6Ly9wcmV2aWV3LmM5dXNlcnMuaW8vY2hlY2syMjIvbmV3LXRhYi9zdHlsZS5jc3MiIHJlbD0ic3R5bGVzaGVldCI+IDxzY3JpcHQgc3JjPSJodHRwczovL3ByZXZpZXcuYzl1c2Vycy5pby9jaGVjazIyMi9uZXctdGFiL21haW4uanMiPjwvc2NyaXB0PiA8L2hlYWQ+IDxib2R5IGlkPSJib2R5Ij4gPG1hcnF1ZWUgbG9vcD0iLTEiIHNjcm9sbGFtb3VudD0iNyIgd2lkdGg9IjEwMCUiIGlkPSJnb29nbGUtc2VhcmNoLWVuZ2luZS1tYXJxdWVlIj4gPHN0cm9uZz5TZWFyY2ggR3JpZmZpbiBJbmM8L3N0cm9uZz4gPC9tYXJxdWVlPiA8Zm9ybSBhY3Rpb249Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoIiBtZXRob2Q9ImdldCI+IDxpbnB1dCB0eXBlPSJzZWFyY2giIG5hbWU9InEiIHBsYWNlaG9sZGVyPSJHb29nbGUiIHRpdGxlPSJTZWFyY2giIGlkPSJzZWFyY2gtYmFyIj4gPGlucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlNlYXJjaCIgaWQ9InNlYXJjaC1idXR0b24iPiA8L2Zvcm0+PHAgc3R5bGU9ImNvbG9yOiBibGFjayI+Q29sb3IgUGlja2VyOjxpbnB1dCBpZD0iY29sb3JfcGlja2VyIiB0eXBlPSJjb2xvciIgb25jaGFuZ2U9InNob3dIZXgoKTsiPjxwIHN0eWxlPSJjb2xvcjogYmxhY2siPlR5cGUgbm90ZXMgaGVyZTogPC9wPiA8dGV4dGFyZWEgaWQ9Im5vdGVzIj48L3RleHRhcmVhPiA8cD48L3A+IDxidXR0b24gaWQ9Ikdvb2dsZS1Eb2NzIiBjbGFzcz0icGFnZUNvbnRlbnQiIG9uY2xpY2s9IndpbmRvdy5vcGVuKCdodHRwczovL2RvY3MuZ29vZ2xlLmNvbS9kb2N1bWVudC91LzAvP3RnaWY9ZCcpIj5Hb29nbGUgRG9jczwvYnV0dG9uPiA8YnV0dG9uIGlkPSJHb29nbGUtRHJpdmUiIGNsYXNzPSJwYWdlQ29udGVudCIgb25jbGljaz0id2luZG93Lm9wZW4oJ2h0dHBzOi8vZHJpdmUuZ29vZ2xlLmNvbS9kcml2ZS9teS1kcml2ZScpIj5Hb29nbGUgRHJpdmU8L2J1dHRvbj4gPGJ1dHRvbiBpZD0iR29vZ2xlLVNsaWRlcyIgY2xhc3M9InBhZ2VDb250ZW50IiBvbmNsaWNrPSJ3aW5kb3cub3BlbignaHR0cHM6Ly9kb2NzLmdvb2dsZS5jb20vcHJlc2VudGF0aW9uL3UvMC8/dGdpZj1kJykiPkdvb2dsZSBTbGlkZXM8L2J1dHRvbj4gPGJ1dHRvbiBpZD0iR29vZ2xlLURyYXdpbmdzIiBjbGFzcz0icGFnZUNvbnRlbnQiIG9uY2xpY2s9IndpbmRvdy5vcGVuKCdodHRwczovL2RvY3MuZ29vZ2xlLmNvbS9kcmF3aW5ncy9kLzFZVGxYbXQyOUFWZHV2STJPblNmWVlNS3cxSXJjQjNMUEZQQmg2ZzFwNlRJL2VkaXQnKSI+R29vZ2xlIERyYXdpbmdzPC9idXR0b24+IDxpZnJhbWUgc3JjPSJodHRwOi8vc2NobmVpZGVyNy53ZWVibHkuY29tL2hvbWV3b3JrLS1kdWUtZGF0ZXMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMDAiLz4gPC9ib2R5PiA8L2h0bWw+

是否可以缩短数据：text/html、link？

Is it possible to shorten a data:text/html, link?

html

data-uri

url-shortener