Skulpt 示例在 Plunker 中不起作用答案

【问题标题】：Skulpt example not work in PlunkerSkulpt 示例在 Plunker 中不起作用
【发布时间】：2017-02-09 18:45:23
【问题描述】：

我是 Plunker 的新手，所以这可能是一个菜鸟问题......但我真的挣扎了很长时间，还没有弄清楚。

我尝试测试发布在 Skulpt 的 Plunker 主站点上的示例代码，但没有成功。但它确实在本地服务器上工作。 Here's my plunker link

代码如下：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script> 

</head> 

<body> 

<script type="text/javascript"> 
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) { 
    var mypre = document.getElementById("output"); 
    mypre.innerHTML = mypre.innerHTML + text; 
} 
function builtinRead(x) {
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
            throw "File not found: '" + x + "'";
    return Sk.builtinFiles["files"][x];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() { 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   mypre.innerHTML = ''; 
   Sk.pre = "output";
   Sk.configure({output:outf, read:builtinRead}); 
   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
   var myPromise = Sk.misceval.asyncToPromise(function() {
       return Sk.importMainWithBody("<stdin>", false, prog, true);
   });
   myPromise.then(function(mod) {
       console.log('success');
   },
       function(err) {
       console.log(err.toString());
   });
} 
</script> 

<h3>Try This</h3> 
<form> 
<textarea id="yourcode" cols="40" rows="10">import turtle

t = turtle.Turtle()
t.forward(100)

print "Hello World" 
</textarea><br /> 
<button type="button" onclick="runit()">Run</button> 
</form> 
<pre id="output" ></pre> 
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas"></div> 

</body> 

</html>

【问题讨论】：

标签： javascript plunker skulpt

【解决方案1】：

您的代码请求 http 资源，并从 Plunker 的 https 版本运行。 Plunker 的编辑器可以在https 或http 中打开，虽然我鼓励前者。

现代浏览器现在将阻止从 https 网站加载 http 资源（例如 Plunk 的预览）。您可以通过打开开发者控制台来观察这一点，您将在其中看到有关被阻止请求的消息。

你有两个选择：

通过http (your plunk over http) 打开您保存的 Plunk
调整您的 plunk 请求来自 https:// 方案的资源：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script src="https://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
<script src="https://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>

【讨论】：

很高兴听到这个消息。如果是这种情况，请考虑采纳答案梁毅。