小编Kai*_*ido的帖子

我正在尝试在我的网页上创建 Worker：

const url = URL.createObjectURL(blob);
const worker = new Worker(url);

Safari 在控制台中显示以下错误：

拒绝加载 blob：https://my.address.com/5fa7b5e6-cb10-4b7c-967b-e95cae58cd71，因为它既没有出现在内容安全策略的 child-src 指令中，也没有出现在 default-src 指令中。

我的页面上有以下内容安全策略标签：

<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:">

但 Safari 似乎忽略了它。我敢打赌我尝试了 SCP 指令（例如worker-src、object-src、script-src、child-src 等）和源（*、blob:、'unsafe-eval'、'unsafe-inline）的所有可能组合'， ETC。）

感谢任何想法！

注意事项：

1. 当我通过 http 在 Safari 中打开网页时，创建的 Worker 没有任何错误。问题是通过 https 打开时。
2. Worker 在 Chrome、Firefox、Edge 中运行良好
3. 我的页面上只有一个 Content-Security-Policy 标签
4. 在 Safari 中检查 Http 响应标头时，它们看起来不错

可以window.URL.createObjectURL()从下面的代码中获取使用URL的URL .

navigator.getUserMedia({ video: true, audio: true }, function (localMediaStream) {

    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadedmetadata = function (e) {
        // Do something with the video here.
    };
}, 
function (err) {
    console.log("The following error occured: " + err);
}
);

问题是现在我有一个blob URL,如:

斑点:HTTP%3A //本地主机%3A1560/f43bed15-da6c-4ff1-b73c-5640ed94e8ee

有没有办法为此创建Media Stream对象？

我浏览了我可以在互联网、MDN、W3C 等上找到的所有可能的资源，但我找不到任何关于 cors 的文档。

我正在尝试在 HTML 中嵌入一个 SVG 。它在同源 URL 中工作正常

<object id="obj1" data="same_origin_url/image.svg"></object>

使用 cross_origin_url 时，无法嵌入 SVG。

<object id="obj2" data="cross_origin_url/image.svg"></object>

在第一种情况下，我可以使用以下代码访问 SVG 并在 SVG 上执行所需的操作（如更改颜色）。

document.getElementById('obj1').contentDocument.getElementByTagName('svg')

而在第二种情况下，它返回抛出错误，因为 obj2 的 contentDocument 返回 null。

document.getElementById('obj2').contentDocument.getElementByTagName('svg')

我试图在应用程序中使用jVectorMap,我收到此错误.

他们网站上显示的示例说明您需要做的就是放在$('#map').vectorMap({map: 'world_mill_en'});您的页面上.

好吧,我有一个带有地图ID的div以及加载的这个脚本,我收到了这个错误.什么是 ？我猜它与SVG或某些未设置的设置有关(如高度或宽度？)

这是我对脚本的使用:

<script>
  $('#map').vectorMap({map: 'world_mill_en'});
</script>

我的div:

<div id="map"></div>

如何设置div的高度/宽度？或者我在vectormap中设置此值,还是完全不同于其他内容？

以下是我的标题脚本的组织方式:

<script src="js/jquery-1.11.2/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
<link rel="stylesheet" href="jvectormap/jquery-jvectormap-2.0.2.css" />
<script src="jvectormap/jquery-jvectormap-world-mill-en.js"></script>

CSS代码:

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  display: inline-block;
}

<span class="test">abcde</span>

但是'变换',

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  transform-origin: 0;
  transform: scale(1.2); /*any attributes*/
  display: inline-block;
}

<span class="test">abcde</span>

不起作用.结果是:

chrome的版本是69.有人可以告诉我为什么这不起作用？

我的问题与在Chrome浏览器中显示base64编码的PDF文件数据有关。PDF文件不是静态物理文件，而是将其流转换为base64编码的数据。它是一个使用Node.js后端的单页应用程序。pdf文件显示在模式弹出框中，而不是新的选项卡或窗口中。下面是负责显示base64编码的PDF数据的代码：

var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,');
objbuilder += (r.response);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('</object>');
var html = '';
html += '<div class="modal fade in" id="linkedDoc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content" style="height:800px;width:600px;">';
html += '<div class="modal-body" style="height: 100%;" id = "linkedBody">';
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls previous" href="javascript:void(0);" data-dismiss="modal" aria-hidden="true">Close</a>';
html += '</div></div></div></div></div>';
$('#linkedDoc').remove();
$('body').append(html);
$('#linkedBody').append(objbuilder);
$('.modal').modal({
    keyboard: false,
    show: true
});
$('.modal-dialog').draggable({ …

从概念上讲，对于大多数用例来说，只有一个作业队列似乎就足够了。
有多个队列并将它们区分为“微任务”和（宏）“任务”的原因是什么？

我有svg stroke-linecap属性的问题.我在AngularJS中有圆形进度条,我想将外圆(蓝色圆圈)设置为圆形"端".看看这个小提琴.

<svg ... height="130" width="130">
<!-- ngIf: background -->
<circle ... 
    ng-if="background" 
    fill="#fff" 
    class="ng-scope" 
    stroke-width="13" 
    stroke="#cc3399" 
    r="57.5" 
    cy="65" 
    cx="65" 
    stroke-linecap="round" 
/>
<!-- end ngIf: background -->
<circle ... 
    fill="none" 
    stroke-dashoffset="36.12831551628261" 
    stroke-dasharray="361.28315516282623" 
    stroke-width="13" 
    stroke="#432db3" 
    stroke-linecap="round" 
    r="57.5" 
    cy="65" 
    cx="65" 
    transform="rotate(-89.9, 65, 65)"
/>
</svg>

我怎样才能做到这一点？

我有一堆 svg 图像（1.svg 2.svg ...），我想将它们居中并将画布大小调整为所有图像的相同值。假设图像 1.svg 有 w。600 和 h。800 和 2.svg 有 w。1000 和小时。400. 我想将画布设置为 1000x800 和中心图像。结果，图像不会调整大小，但它们的侧面会有额外的空间 -> 1.svg 仍将是 600x800，但在尺寸为 1000x800 的画布中，2.svg 将是 1000x400，但在尺寸为 1000x800 的画布中。可以在命令行中执行吗？使用 inkscape、imagemagick 等？

提前致谢！

现在所有主要浏览器都支持DecompressionStream API，但我不知道如何使用它fetch()在浏览器中解压缩 gzip 文件。

以下代码适用于 base64 字符串：

const decompress = async (url) => {\n  const ds = new DecompressionStream(\'gzip\');\n  const response = await fetch(url);\n  const blob_in = await response.blob();\n  const stream_in = blob_in.stream().pipeThrough(ds);\n  const blob_out = await new Response(stream_in).blob();\n  return await blob_out.text();\n};\n\ndecompress(\n  \'data:application/octet-stream;base64,H4sIAAAAAAAAE/NIzcnJVyjPL8pJAQBSntaLCwAAAA==\'\n).then((result) => {\n  console.log(result);\n});

\n

但是，如果我在 MacOS 上hello.txt.gz使用创建文件（是内容为“hello world”的纯文本文件），则上面的函数会抛出错误。gzip hello.txthello.txt

decompress(\'/hello.txt.gz\').then((result) => {\n  console.log(result);\n});\n

decompress(\'/hello.txt.gz\').then((result) => {\n  console.log(result);\n});\n

编辑