c ++内联函数_内联MHTML +数据URI

最新推荐文章于 2021-06-16 02:41:42 发布

cunbei2644

最新推荐文章于 2021-06-16 02:41:42 发布

阅读量165

点赞数

文章标签： java python html js css ViewUI

原文链接：https://www.phpied.com/inline-mhtml-data-uris/

版权

c ++内联函数

MHTML and Data URIs in the same CSS file is totally doable and gives us nice support for IE6+ and all modern browsers. But the question is - what about inline styles. In other words can you have a single-request web application which bundles together markup, inline styles, inline scripts, inline images? With data URIs - yes, clearly. But MHTML?

同一CSS文件中的MHTML和数据URI 完全可行，并且为我们提供了对IE6 +和所有现代浏览器的良好支持。但是问题是-内联样式呢？换句话说，您能否拥有一个将标记，内联样式，内联脚本，内嵌图像捆绑在一起的单一请求Web应用程序？使用数据URI-是的，很明显。但是，MHTML？

I remember hacker extraordinaire Hedger Wang coming up with a test page, which proved it's doable. Problems with the test are that a/ I can't find the page anymore, his domain has expired b/ there was some funky IE7/Vista stuff (probably now solvable) in there which even included an undesired redirect c/ was complex - the whole HTML becomes a multipart document, if I remember correctly there was something that required html served as text/plain....

我记得黑客非凡的Hedger Wang提出了一个测试页，事实证明这是可行的。测试的问题是a /我找不到页面了，他的域名已经过期b /那里有一些时髦的IE7 / Vista东西(现在可能已经解决了)，其中甚至包含了不希望的重定向c /很复杂-整个HTML变成了一个多部分文档，如果我没记错的话，有些东西需要html用作文本/纯文本...。

So I tried something simple - shove an MHTML doc inside an inline style comment. It so totally worked! Including IE6 and IE8 in IE7 mode on Windows 7 (which in my experience behaves as badly as IE7 proper on Vista)

因此，我尝试了一些简单的方法-将MHTML文档插入内联样式注释中。如此完全有效！包括Windows 7上IE7模式下的IE6和IE8(以我的经验，其行为与Vista上的IE7一样差)

Here's the test page. Look ma', no extra HTTP requests 🙂

这是测试页。看，没有多余的HTTP请求requests

So it's a simple HTML doc:

因此，这是一个简单HTML文档：

<!doctype html>
<html>
  <head>
    <title>Look Ma' No HTTP requests</title>
    <style type="text/css">
 
/* magic here */
 
    </style>
  </head>
  <body>
    <h1>MHTML + Data:URIs inline in a <code>style</code> element</h1>
    <p class="image1">hello<br>hello</p>
    <p class="image2">bonjour<br>bonjour</p>
  </body>
</html>

And the magic is two parts: the MHTML doc inside a CSS comment and the actual CSS which uses data URIs for normal browsers and refers to the MHTML parts in IE6,7.

魔术有两个部分：CSS注释中的MHTML文档和实际CSS，该CSS在正常浏览器中使用数据URI，并引用IE6,7中的MHTML部分。

/*
Content-Type: multipart/related; boundary="_"
 
--_
Content-Location:locoloco
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAAN ... [more crazyness]... QmCC
--_
Content-Location:polloloco
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUh ... [moarrr] ... ggg==
--_--
*/
.image1 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN ... QmCC"); 
  *background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml-html.html!locoloco); 
}
 
.image2 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh ... ggg=="); 
  *background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml-html.html!polloloco); 
}
 
body {
  font: bold 24px Arial;
}

How cool is that!

多么酷啊！

Please report any issues you might find in any browser/os combination

请报告您在任何浏览器/操作系统组合中可能发现的任何问题

The obvious drawback is repeating the long base64'd image content twice, but it's solvable with either server-side sniffing or... one crazy hack, found on the Russian site habrahabr.ru. I should talk about it separately and help spread the word to the larger English-speaking audience, but for the impatient - click!

明显的缺点是重复了较长的base64图像内容两次，但是可以通过服务器端嗅探或...在俄罗斯网站habrahabr.ru上发现的一个疯狂hack来解决。我应该单独谈论它和帮助流传着一句话较大讲英语的观众，但对于不耐烦-点击！

So there you go - MHTML inline in CSS inline in HTML or building single-request x-browser web apps 🙂

因此，您就可以了-在HTMLCSS内联中使用MHTML内联或在HTML中构建单一请求的x浏览器Web应用程序🙂

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息