发表新帖
发表新帖

How do I take code from Codepen, and use it locally?

后端 未结
关注
5 1204
醉梦人生
醉梦人生 2021-02-01 21:03

How do I take the code from codepen, and use it locally in my text-editor?

http://codepen.io/mfields/pen/BhILt

I am trying to have a play with this creation loca

相关标签:
5条回答
  • 后悔当初
    2021-02-01 21:11

    It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;

        $( document ).ready(function() {
      // js goes in here.
    });

    either u can try this....

        function init() {
     // Run your javascript code here
  }
document.addEventListener("DOMContentLoaded", init, false);
    0 讨论(0)
  • 时光说笑
    2021-02-01 21:12

    Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

    0 讨论(0)
  • 眼角桃花
    2021-02-01 21:18

    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.

    0 讨论(0)
  • 旧时难觅i
    2021-02-01 21:30

    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.

    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.

    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.

    0 讨论(0)
  • 野趣味
    2021-02-01 21:37

    looks like you are calling the JS before the DOM is loaded.

    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.

    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

    Or you could name the function in your JS and execute it onLoad of the body:

    <body onLoad="yourFunction();">
    0 讨论(0)
 看不清?
提交回复
热议问题