JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<button id="click-me">Toggle Iframe</button>

<ul id="log"></ul>

<div id="container"></div>

JavaScript

function log(message) {
	const time = (new Date()).toLocaleString()

	$('#log').append('<li>' + time + ' - ' + message + '</li>')
}

$('#click-me').click(function () {
	if ($('#container iframe').length) {
  	$('#container iframe').remove()
    log('Frame Removed')
  } else {
  	const $frame = $('<iframe />').attr({
    	src: 'https://downloads.plumbr.io/overview.pdf',
      width: '500px',
      height: '500px'
    })
    $frame.on('load', function () {
    	log('Frame Loaded')
    })
    $('#container').append($frame)
    log('Frame Added')
  }
})