我正在使用 varnish+esi 从 RESTFul API 返回外部 json 内容。 这种技术允许我管理请求和刷新数据，而无需为每个请求使用网络服务器资源。
例如:
<head>
....
<script>
var data = <esi:include src='apiurl/data'>;
</script>
...
包含 esi Varnish 后将返回:
var data = {attr:1, attr2:'martin'};
这工作正常，但如果 API 返回错误，则此技术将生成解析错误。
var data = <html><head><script>...api js here...</script></head><body><h1 ... api html ....
我使用隐藏的 div 解析并捕获错误解决了这个问题:
...
<b id=esi-data style=display:none;><esi:include src='apiurl/data'></b>
<script>
try{
var data = $.parseJSON($('#esi-data').html());
}catch{ alert('manage the error here');}
....
我也尝试过使用脚本类型 text/esi，但浏览器会在脚本标签 (wtf) 内呈现 html，例如:
<script id=esi-data type='text/esi'><esi:include src='apiurl/data'></script>
问题:
为什么要包装标签并避免浏览器解析它？
最佳答案
让我扩展一下 iframe我在评论中提出的建议——这与您的想法不完全相同!
该方法与您已经在做的几乎完全相同，但不是使用像 div 这样的普通 HTML 元素。 , 你使用 iframe .
<iframe id="esi-data" src="about:blank"><esi:include src="apiurl/data"></iframe>
var $iframe = $('#esi-data');
try {
var data = $.parseJSON($iframe.html());
} catch (e) { ... }
$iframe.remove();
#esi-data { display: none; }
这与您的解决方案有何不同？两种方式:
数据/错误页面对您的访问者是真正隐藏的。
iframe有一个 embedded content模型，表示<iframe>…</iframe>中的任何内容标签在 DOM 中被完全替换——但您仍然可以使用innerHTML检索原始内容.它是有效的 HTML5……有点。在 HTML5 中，markup inside iframe elements is treated as text .当然，您意味着能够将它解析为一个片段，并且它意味着只包含短语内容(没有
script元素!)，但它基本上只是被验证器——以及浏览器。来自错误页面的脚本将不会运行。内容被解析为文本并在 DOM 中替换为另一个文档——没有任何机会
script要处理的元素。
Take a look at it in action .如果您注释掉我删除 iframe 的行元素并检查 DOM，您可以确认 HTML 内容正在被一个空文档替换。还要注意嵌入的 script标记永远不会运行。
重要:如果第三方添加了 iframe，此方法仍可能失败出于某种原因将元素添加到他们的错误页面中。尽管这不太可能，但您可以通过将您的技术与此技术相结合来使该方法更加可靠:包围 iframe。带有隐藏的 div完成解析后删除。
关于javascript - 最安全的 JavaScript JSON 内联技术，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11781576/