如何从Codepen获取代码并在本地使用它？
[英]How do I take code from Codepen, and use it locally?
问题描述
How do I take the code from codepen, and use it locally in my text-editor? 
如何从codepen中获取代码，并在我的文本编辑器中本地使用它？
http://codepen.io/mfields/pen/BhILt http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on. 我试图在本地玩这个创作，但当我用chrome打开它时，我得到一个空白的白页，没有任何进展。
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above. 我已经将css和js复制，粘贴并保存到不同的文件中并保存，然后尝试将它们链接到html文件中，如上所示。
I have also included the jquery library as I understand a lot of the codepen creations use it. 我已经包含了jquery库，因为我了解很多codepen创建使用它。
The only console error I'm getting is 我得到的唯一控制台错误是
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4 这是链接到我的js文件，第4行
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this. 对不起，如果这是愚蠢的，但我对这一切都是新手。 I'm sure this is basic as hell. 我确信这是基本的地狱。 Any help would be awesome! 任何帮助都是极好的！
5 个解决方案
解决方案1
10 已采纳 2015-04-26 11:29:17
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). Joe Fitter是对的，但我认为最好导出你的笔 （使用export to export.zip选项在本地使用你的笔）。 This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work. 这将为您提供笔的工作版本，而无需复制和粘贴CSS，JavaScript和HTML代码，也无需对其进行更改以使其正常工作。
解决方案2
4 2015-04-26 11:23:04
It seems your javascript is running before the HTML has finished loading. 在HTML加载完成之前，您的javascript似乎正在运行。 If you can use jQuery put the js inside of this; 如果你可以使用jQuery把js放在里面;
$( document ).ready(function() {
// js goes in here.
});
either u can try this.... 或者你可以尝试这个....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
解决方案3
2 2015-04-26 11:22:21
looks like you are calling the JS before the DOM is loaded. 看起来你在加载DOM之前调用了JS。
try wrapping it in a 尝试将其包裹在一个
$(function() {
// your code here
});
which is the same as 这是一样的
$(document).ready(function() {
// your code here
});
if you are using jQuery. 如果你使用jQuery。
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed 或者您可以在内容之后包含<script>标记，就在结束体标记之前，这将确保在执行JS之前呈现内容
Or you could name the function in your JS and execute it onLoad of the body: 或者您可以在JS中命名该函数并在body的onLoad上执行：
<body onLoad="yourFunction();">
解决方案4
1 2016-02-15 06:48:54
Right click on the result frame and choose View Frame source . 右键单击result框架，然后选择“ View Frame source 。 And you can copy the source code and paste it in your own text-editor. 您可以复制源代码并将其粘贴到您自己的文本编辑器中。
解决方案5
0 2016-09-28 11:33:08
To download the computed html of a codepen, go to the codepen of your choice, then click the "Change View" button and go to the "full page" mode. 要下载codepen的计算html，请转到您选择的codepen，然后单击“Change View”按钮并转到“整页”模式。
Now depends on your browser. 现在取决于您的浏览器。
Firefox 火狐
display the source code (Cmd+u) and go at the very bottom. 显示源代码（Cmd + u）并进入最底层。 Look for the last iframe and click on the value of the src attribute. 查找最后一个iframe，然后单击src属性的值。 There you go. 你去吧
Chrome 铬
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option. 右键单击页面（而不是codepen标题）并选择View FRAME source（不是view PAGE source）选项。 There you go. 你去吧
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.