Question

我在Safari＆amp; amp; Mac上的Chrome。我刚刚切换到PC上查看Firefox Mac和IE，但它无法正常工作。我似乎无法弄明白为什么！任何建议都会很棒。

http://davidcool.com/experiments/follow.html

代码：

<!DOCTYPE html>
<html>
<head>
    <title>follow</title>
    <script src=processing-1.4.1.min.js></script>
</head>
<body>
    <div style="width:100%; height:100%; position:absolute; top:50;">
        <canvas data-processing-sources="harmonograph_v2_1_logo.pde" tabindex="0" id="__processing0" width="1300" height="160"></canvas>
    </div>
</body>
</html>

根据Mike的建议，我将其剥离为骨头，但它仍无法在PC IE或Mac Firefox中使用。 Chrome和Safari Mac工作正常。我添加了编码，因为firebug给了我一个错误。没效果。

<!DOCTYPE html>
<html>
<head>
<title>test pjs</title>
    <meta charset='utf-8'>
<script src="processing-1.4.1.min.js"></script>
</head>
<body>
<div>
    <canvas data-processing-sources="harmonograph.pjs"></canvas>
</div>
</body>
</html>

我还构建了一个转换器并将草图从处理.pde文件转换为处理js .pjs格式：http://generactive.net/tools/pde_to_pjs/convert_to_pjs.html?#

转换后的文件在同样的两个浏览器中也可以正常工作。

好的，有关此问题的更新。我已经取代了草图，现在它可以工作了。所以问题出在某处的草图上。我不确定问题是什么，或者为什么它适用于某些酿酒商而不是其他酿酒商，但草图中的某些内容会杀死某些浏览器。上面的代码应该可以正常工作。

Answer 1

Pjs库的名称中包含特殊字符，因此需要引用：<script src="processing-1.4.1.min.js"></script>。引用属性字符串是一种很好的做法，因为只有连续的非特殊字符串可以不加引号。

在辅助说明中，您实际上并不需要tabindex="0" id="__processing0"位，这些位由Pjs自动添加（如果您使用的是自我指定的id属性，则最好给它一个真实的名称）

最后，<div style="width:100%; height:100%; position:absolute; top:50;">在高度方面不会做太多，除非你为html和body指定CSS规则，将它们设置为100％。基本上，当然首先要使工作正常，我建议不要在画布和容器中指定宽度和高度。让div计算出自动调整所需的维度，然后让画布从pde文件中size(...,...)函数内的setup调用中获取其大小。

处理画布中引用的js .pde不适用于Firefox＆amp; IE

1 个答案: