Skip to content

Instantly share code, notes, and snippets.

@wsrast

wsrast/index.html

Created July 24, 2017 14:57
Show Gist options
  • Save wsrast/67b574c397332d48bcaab5c2ef9c974b to your computer and use it in GitHub Desktop.
Save wsrast/67b574c397332d48bcaab5c2ef9c974b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Adding scripts to an interior iframe through src attribute and/or DOM access // source http://jsbin.com/vijupoy
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment