Question

我一直在编写一个名为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>

Answer 1

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

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

缩短数据URI是否有用？我无法想到任何合理的用例。 data：text / html URI适用于非常小的演示（按两位或三位字节计数的顺序 - 这里是couple examples）并用于快速实验。在他们正确的思想中，没有人会将整个HTML文档放在数据URI中，并希望最终用户像真实文档一样使用它。至关重要的是，搜索引擎无法对数据URI进行索引，但当然这取决于用例，可以是pro或con。

此外，Internet Explorer and Microsoft Edge don't support navigating to data URIs of any kind for security reasons，即使你可以创建一个重定向到数据URI的短网址，它也无法在任何地方使用。

如果你想要＆＃34;简短的网址＆＃34;链接到可运行/可编辑的网页摘要，有大量服务专门用于此目的，例如JSFiddle，JS Bin，CodePen ...列表继续。这些都生成具有合理短标识符的URL。此外，它们都是基于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

（不是我的例子;在使用Google https://news.ycombinator.com/item?id=2464213后的does any url shortener support data uris上找到）

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

无法访问此网站

数据网页：text / html; charset = utf-8，但是，％20data％20URI％20％％20％20same％20％％20％％20服务器可能暂时关闭或者可能已永久移动到新网站地址。

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（必填） - 添加要缩短的网址。
GOOGLE_API_KEY - 从Google Project创建的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}"
            />
        );
    }
}

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？

4 个答案: