是否可以缩短数据：文本/html，链接？答案

【问题标题】：Is it possible to shorten a data:text/html, link?是否可以缩短数据：文本/html，链接？
【发布时间】：2017-06-09 17:22:33
【问题描述】：

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

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>

【问题讨论】：

链接缩短服务可能对链接的大小有限制。为什么需要将整个 HTML 文档直接放在链接中，而不是放在服务器上？
您需要在导航后从网址栏中复制该链接；如图所示，它是无效的，但 url 栏会为你转义它，然后它可能适用于一些“小 url”服务。
因为它的格式无效。要么对其进行编码，要么在 goo.go 中，关闭前端验证并尝试

标签： html data-uri url-shortener

【解决方案1】：

是否可以缩短数据：文本/html，链接？

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

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

此外，Internet Explorer and Microsoft Edge don't support navigating to data URIs of any kind for security reasons，所以即使您可以创建一个重定向到数据 URI 的短 URL，它也不会在任何地方都有效。

如果您想要链接到可运行/可编辑的网络 sn-ps 的“短 URL”，则有大量专门用于此目的的服务，例如 JSFiddle、JS Bin、CodePen... 列表继续。这些都生成具有相当短标识符的 URL。此外，它们都是基于 HTTP 的，因此可以在 IE 和 Microsoft Edge 中使用。

【讨论】：

我使用数据 URL 的原因是它不需要互联网。我用它作为我的新标签页。我想缩短它的原因是如果你看它是否显示了我到 css 的链接，它有一个网站链接。这确实有效，但如果没有我想要的互联网，它就无法工作。我通过使用 data:text/css 找到了一个解决方案，但它可能很长。我会使用<link rel="stylesheet" href="data:text/css, body {background-color: blue}"> 这只是一个例子。我不想要比已有的更长的链接。
@TheGamer 你应该尝试使用 AppCache。
@The Gamer：嗯，您需要连接互联网才能访问短 URL，以便访问您的目标数据 URI。

【解决方案2】：

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

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

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

（不是我的例子；在谷歌搜索 does any url shortener support data uris 后在 https://news.ycombinator.com/item?id=2464213 上找到）

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

无法访问此网站

位于 data:text/html;charset=utf-8 的网页，但是，%20data%20URI%20does%20the%20same%20without%20the%20 服务器可能暂时关闭，或者它可能已永久移动到新网站地址。

ERR_UNSAFE_REDIRECT

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

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

如果你 f.e.使用这样一个缩短的 URL，它重定向到一个数据 URI 作为图像元素或其他类型的嵌入资源的 src；但作为“重定向”到完整网页的工具，它似乎并不合适。

【讨论】：

【解决方案3】：

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

data:text/html;base64,PGgxPkhlbGxvLCBXb3JsZDwvaDE+

你的 HTML 可以被编码成

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

【讨论】：

【解决方案4】：

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

道具：

url (必填) - 添加你想缩短的 url。
GOOGLE_API_KEY - 从谷歌项目创建的 API 密钥。

用法：

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}"
            />
        );
    }
}

【讨论】：