Javascript 如何从 Codepen 获取代码并在本地使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29876904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I take code from Codepen, and use it locally?
提问by Sam Mcleod
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!
对不起，如果这很愚蠢，但我对这一切都很陌生。我确定这是基本的。任何帮助都是极好的！
采纳答案by álvaro Arranz
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). 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.
Joe Fitter 是对的，但我认为导出你的笔更好（使用导出到 export.zip 选项在本地使用你的笔）。这将为您提供笔的工作版本，而无需复制和粘贴 CSS、JavaScript 和 HTML 代码，也无需对其进行更改以使其工作。
回答by thangdc94
Right click on the resultframe and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
右键单击result框架并选择View Frame source。您可以复制源代码并将其粘贴到您自己的文本编辑器中。
回答by Shariq Ansari
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
在 HTML 加载完成之前，您的 javascript 似乎正在运行。如果你可以使用 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);
回答by Joe Fitter
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="yourFunction();">
回答by ling
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.
要下载代码笔的计算 html，请转到您选择的代码笔，然后单击“更改视图”按钮并转到“整页”模式。
Now depends on your browser.
现在取决于您的浏览器。
Firefox
火狐
display the source code (Cmd+u) and go at the very bottom. Look for the last iframe and click on the value of the src attribute. There you go.
显示源代码（Cmd+u）并进入最底部。查找最后一个 iframe 并单击 src 属性的值。你去吧。
Chrome
铬合金
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option. There you go.
右键单击页面（不是 codepen 标题）并选择查看框架源（不是查看 PAGE 源）选项。你去吧。
