JSFiddle - React, Tailwind, and code Playground

by williamdaburke

HTML

<body>
  <div id='div1'></div>

  <button id="myButton">Button</button>
  <button id="myButton2">Button2</button>

  <iframe id="editor-iframe" width="200" height="200" frameborder="0"></iframe>
  <div id="iframe_div">
  </div>
</body>

JavaScript

var datagh
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('http://www.comuni-italiani.it/') + '&callback=?', function(data) {
  // $("#div1").html(data.contents);
  iframe = document.getElementById('editor-iframe'),
    editorDoc = iframe.contentDocument || iframe.contentWindow.document;


  // simulating modifications to document in editor iframe
  $(editorDoc)
    .find('body').html(data.contents)
    .end();

  datagh = {
    /*html: $(editorDoc).find('p').get(0).outerHTML,
    css: $(editorDoc).find('head style').html(),
    metadata: {
      user: 'onur'
    },*/
    me1: $(editorDoc).find('b a').get(5).innerText,
    mes1: $(editorDoc).find('table.main tr td b a').map(function() {
      return this.innerText;
    }).get(),
    meRefs1: $(editorDoc).find('table.main tr td b a').map(function() {
      return this.href;
    }).get()

  };

});
$('#myButton').click(function() {
  var txt1 = datagh.meRefs1[3]
  var txt2 = txt1.split(/display\//);
  var newhtml = "http://www.comuni-italiani.it" + "/" + txt2[1]
    //alert(newhtml)
  $("#div1").html(newhtml);
  $('<iframe>') // Creates the element
    .attr('src', newhtml) // Sets the attribute spry:region="myDs"
    .attr('height', 700)
    .attr('width', 500)
    .attr('id', 'my_page')
    .appendTo('#iframe_div');
});
$('#myButton2').click(function() {

  var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(datagh.meRefs1[3]));

  $('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#div1');
  // alert(datagh.meRefs1[3])
});