Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <style>
  body{
    min-width: 0 !important;
  }
  .description{
    border-radius: 5px;
    background-color: rgba(34,34,34,0.2);
    float: left;
    position: relative;
    z-index: 5;
    padding: 5px;
  }
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <!-- Adding Promise and Fetch polyfills -->
  <!-- Using http://polyfills.io/ API -->
  <script src="https://cdn.jsdelivr.net/polyfills/polyfill.js+promise,fetch"></script>
</head>
<body>
  <div class="description">
    <p>
      <strong>Fetch API in action!</strong>
    </p>
    <p>Move your mouse and use wheel to resize the cube</p>
    <p>
      Fetching HTML from <a href="http://jsbin.com/ratem/edit">http://jsbin.com/ratem/edit?html,output</a>
    </p>
    <a href="http://addyosmani.com/demos/fetch-api/rainbow.html">The source of idea</a>
  </div>
  <div id="output"></div>
</body>
</html>
 
fetch('http://jsbin.com/ratem')
.then(function(response) {
  console.log('response', response);
  console.log('header', response.headers.get('Content-Type'));
  return response.text();
}).then(function(text) {
  console.log('text', text);
  var output = document.querySelector('#output');
  output.innerHTML = text;
  // evaluating script from fetched source
  var script = output.getElementsByTagName('script')[1];
  eval(script.innerHTML);
}).catch(function(error) {
    console.log('An error occured', error);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
malywpro
0viewers