简体   繁体   English

Skulpt示例在Plunker中不起作用

[英]Skulpt example not work in Plunker

I'm new to Plunker so this may be a noob question...But I really struggled a long time and haven't figured it out yet. 我是Plunker的新手,所以这可能是个菜鸟问题……但是我真的很挣扎了很长时间,还没有弄清楚。

I tried to test the example code published on Skulpt's main site in Plunker but it just didn't work. 我试图测试在Skulpt的主站点Plunker中发布的示例代码,但是它没有用。 But it did work in local server. 但是它确实在本地服务器上工作。 Here's my plunker link 这是我的朋克链接

Here's the code: 这是代码:

<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> 

Your code requests http resources and is being run from the https version of Plunker. 您的代码需要http资源,并且正在从Plunker的https版本运行。 Plunker's editor can be opened either in https or in http though I encourage the former. 虽然我鼓励使用Plunker的编辑器,但可以使用httpshttp打开。

Modern browsers will now block the loading of http resources from an https website (such as the preview of your Plunk). 现代浏览器现在将阻止从https网站(例如Plunk的预览)加载http资源。 You can observe this by opening the developer console where you will see messages about blocked requests. 您可以通过打开开发人员控制台来观察此情况,在该控制台中您将看到有关已阻止请求的消息。

You have two options: 您有两种选择:

  1. Open your saved Plunk via http ( your plunk over http ) 通过打开保存的普拉克http您普拉克通过HTTP
  2. Adjust the resources that your plunk requests to come from an https:// scheme: 调整您的请求请求来自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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM