wsrast/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Adding scripts
  to an interior iframe through
  src attribute and/or DOM access">
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe id="myIframeId"></iframe>
<script id="jsbin-javascript">
/* You can add a whole new JS file to an iframe from the
 * parent like this: */
var src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
var myIframe = document.getElementById("myIframeId");
var myIframeDocument = myIframe.contentWindow.document;
var script = myIframeDocument.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframeDocument.body.appendChild(script);

/* And/Or, you can create elements and functions inside
 * it manually like this: */
var btn = myIframeDocument.createElement('button');
btn.onclick = function (e) {
  /* I'm grabbing a reference to the ownerDocument here
   * so that I'm using the jQuery object that only
   * exists inside the iframe. */
  var doc = e.target.ownerDocument;
  var win = doc.defaultView || doc.parentWindow;

  alert('html: ' + win.$('button').html());
};
btn.innerHTML = 'Click me';
btn.style.width = '100px';
btn.style.height = '20px';

myIframeDocument.body.appendChild(btn);
</script>


<script id="jsbin-source-javascript" type="text/javascript">/* You can add a whole new JS file to an iframe from the
 * parent like this: */
var src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
var myIframe = document.getElementById("myIframeId");
var myIframeDocument = myIframe.contentWindow.document;
var script = myIframeDocument.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframeDocument.body.appendChild(script);

/* And/Or, you can create elements and functions inside
 * it manually like this: */
var btn = myIframeDocument.createElement('button');
btn.onclick = function (e) {
  /* I'm grabbing a reference to the ownerDocument here
   * so that I'm using the jQuery object that only
   * exists inside the iframe. */
  var doc = e.target.ownerDocument;
  var win = doc.defaultView || doc.parentWindow;

  alert('html: ' + win.$('button').html());
};
btn.innerHTML = 'Click me';
btn.style.width = '100px';
btn.style.height = '20px';

myIframeDocument.body.appendChild(btn);
</script></body>
</html>

## jsbin.vijupoy.js
/* You can add a whole new JS file to an iframe from the
 * parent like this: */
var src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
var myIframe = document.getElementById("myIframeId");
var myIframeDocument = myIframe.contentWindow.document;
var script = myIframeDocument.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframeDocument.body.appendChild(script);

/* And/Or, you can create elements and functions inside
 * it manually like this: */
var btn = myIframeDocument.createElement('button');
btn.onclick = function (e) {
  /* I'm grabbing a reference to the ownerDocument here
   * so that I'm using the jQuery object that only
   * exists inside the iframe. */
  var doc = e.target.ownerDocument;
  var win = doc.defaultView || doc.parentWindow;

  alert('html: ' + win.$('button').html());
};
btn.innerHTML = 'Click me';
btn.style.width = '100px';
btn.style.height = '20px';

myIframeDocument.body.appendChild(btn);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Adding scripts
	to an interior iframe through
	src attribute and/or DOM access">
	<meta charset="utf-8">
	<meta name="viewport"
	content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<iframe id="myIframeId"></iframe>
	<script id="jsbin-javascript">
	/* You can add a whole new JS file to an iframe from the
	* parent like this: */
	var src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
	var myIframe = document.getElementById("myIframeId");
	var myIframeDocument = myIframe.contentWindow.document;
	var script = myIframeDocument.createElement("script");
	script.type = "text/javascript";
	script.src = src;
	myIframeDocument.body.appendChild(script);

	/* And/Or, you can create elements and functions inside
	* it manually like this: */
	var btn = myIframeDocument.createElement('button');
	btn.onclick = function (e) {
	/* I'm grabbing a reference to the ownerDocument here
	* so that I'm using the jQuery object that only
	* exists inside the iframe. */
	var doc = e.target.ownerDocument;
	var win = doc.defaultView \|\| doc.parentWindow;

	alert('html: ' + win.$('button').html());
	};
	btn.innerHTML = 'Click me';
	btn.style.width = '100px';
	btn.style.height = '20px';

	myIframeDocument.body.appendChild(btn);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">/* You can add a whole new JS file to an iframe from the
	* parent like this: */
	var src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
	var myIframe = document.getElementById("myIframeId");
	var myIframeDocument = myIframe.contentWindow.document;
	var script = myIframeDocument.createElement("script");
	script.type = "text/javascript";
	script.src = src;
	myIframeDocument.body.appendChild(script);

	/* And/Or, you can create elements and functions inside
	* it manually like this: */
	var btn = myIframeDocument.createElement('button');
	btn.onclick = function (e) {
	/* I'm grabbing a reference to the ownerDocument here
	* so that I'm using the jQuery object that only
	* exists inside the iframe. */
	var doc = e.target.ownerDocument;
	var win = doc.defaultView \|\| doc.parentWindow;

	alert('html: ' + win.$('button').html());
	};
	btn.innerHTML = 'Click me';
	btn.style.width = '100px';
	btn.style.height = '20px';

	myIframeDocument.body.appendChild(btn);
	</script></body>
	</html>