in the web-app I'm developing I'd need to dynamically create/remove iframe elements and to catch the corresponding remove events.
This is the relevant html:
index.html
<main>
[..]
<iframe id="iframe_id" width="700" height="650" src=""></iframe>
<div class="theday" id="js-theday"></div>
[..]
</main>
<script src="app.js"></script>
<script type="text/javascript">
function closeIFrame() {
$('#iframe_id').remove();
}
[..]
</script>
In app.js I'm catching the remove event sent in closeIFrame()
$('#iframe_id').on('DOMNodeRemoved', function() {
}
In the first run, when the iframe calls parent.closeIFrame(), app.js receives correctly the
DOMNodeRemoved and do stuffs.
At some point, I'd need to recreate the iframe element. In app.js
function recreate_iframe_html() {
const target = document.querySelector('#js-theday');
var new_iframe = document.createElement('iframe');
new_iframe.setAttribute('id', 'iframe_id');
new_iframe.width = 700;
new_iframe.height = 650;
new_iframe.src = '';
target.parentNode.insertBefore(new_iframe, target);
}
[..]
recreate_iframe_html();
When the new iframe calls parent.closeIFrame(), the iframe is correctly removed but app.js does not detect the DOMNodeRemoved event.
Why is that?
Thank you for your help.
.on('DOMNodeRemoved') only works on the items returned by the query (that is, #iframe_id). It does not stick around to listen to newly created items with the same id.
You need to add another listener when creating the new iframe.
Related
How can I get the class of an element clicked upon in an iframe?
HTML:
<input id="tag" type="text">
<iframe id="framer" src="SameDomainSamePort.html"></iframe>
JS:
$(document).ready(function () {
$("iframe").each(function () {
//Using closures to capture each one
var iframe = $(this);
iframe.on("load", function () { //Make sure it is fully loaded
iframe.contents().click(function (event) {
iframe.trigger("click");
});
});
iframe.bind("click", function(e) {
// always returns the iframe rather than the element selected within the iframe...
$("#tag", window.top.document).val($(e)[0].target.className);
return false;
});
});
});
Would it be easier to inject js?
And could I add css as well?
All help is appreciated!
Here should be enough tools to do what you want
Also the load event cannot be used unless you set the src later, because it has already triggered when you run your code
The fiddle works: https://jsfiddle.net/mplungjan/kqeqzusf/
SO have more stringent sandbox issues but also look at
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
$(function() {
$(".iframe").each(function(i) {
var doc = $(this)[0].contentWindow.document;
var $body = $('body',doc);
$body.html(`<div id="test${i}">Click me ${i}</div>`); // or set the source
$body.on("click",function(e) { // assign a handler
console.log(e.target.id);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<iframe id="iframe1" class="iframe"></iframe>
<iframe id="iframe2" class="iframe"></iframe>
</div>
More:
putting html inside an iframe (using javascript)
jQuery/JavaScript: accessing contents of an iframe
jQuery/JavaScript: accessing contents of an iframe
[jQuery]Find click inside an iFrame
I'm trying to call iframe2 function from iframe1
document.getElementById('cDiv').contentWindow.toggle_main();
var iframe = document.getElementsByTagName('iframe')[1];
iframe.contentWindow.myFunction();
The console is returning Uncaught TypeError: Cannot read property 'contentWindow' of undefined
I have also tried:
window.frames['iframe2'].toggle_main();
The function in iframe2 is called:
<script>
window.myFunction = function(args) {
alert("called");
}
</script>
The iframes are defined as:
<DIV id="cgDiv">
<IFRAME id="contentGenerator" SCROLLING="No" name ="iframe1" src="outlook.html">
</IFRAME>
</DIV>
<DIV id="cDiv">
<IFRAME id="content" SCROLLING="AUTO" verticalscrolling="yes" NAME = "iframe2" src="index.html">
</IFRAME>
</DIV>
Ideas on where the problem should be?
Javascript can't access functions in an IFrame directly. IFrames can access functions in their parent though.
So if your main page exposes a method RegisterCallback for instance, the IFrame can call it with one of its functions as parameter. The page can then store a reference to the function and call it at another time (with any parameters...)
UPDATE: Added example code
The code below is two files; index.html which is the master page with iframe(s), and child.html which is the page inside the iframe(s).
I've committed the example to github and you can test it by following this link. Due to browser security restrictions the code must be loaded from the same webserver and doesn't work if run directly from the filesystem.
I've intentionally included the child iframe twice to illustrate that any number of children can be registered with this technique. I leave it as an excercise to the reader to add a third iframe... :)
index.html
<html>
<body style="background:#efe">
<h1>This is the master page</h1>
<p><button id="setChildButton" type="button">Make child blue</button></p>
<iframe src="child.html"></iframe>
<iframe src="child.html"></iframe>
</body>
</html>
<script>
var childCallbacks = [];
function registerChild(callback){
console.log('Registering child callback');
childCallbacks.push(callback);
}
function onButtonClick(){
for (var i=0; i < childCallbacks.length; i++){
var callback = childCallbacks[i];
callback('blue');
}
}
window.onload = function(){
document
.getElementById('setChildButton')
.addEventListener('click', onButtonClick);
};
</script>
The javascript has a function registerChild() that it never calls itself, but can be called from child pages to register their endpoints.
When the button is clicked, all registered callbacks are called with the string "blue". It is then up to the childs endpoint to do something good with that. In this case changing its own background color.
child.html
<html>
<body id="childBody" style="background:#fee">
<h2>This is the child page</h2>
</body>
</html>
<script>
function setBackground(color){
var body = document.getElementById('childBody');
body.style.backgroundColor = color;
}
window.onload = function(){
if (parent && parent.registerChild){
console.log('registering with parent');
parent.registerChild(setBackground);
}
};
</script>
The javascript of the child checks if there is a parent (it is running inside an iframe) and that the parent provides a function called registerChild(). It then calls that function with a reference to its own function setBackground().
When the parent later calls the callback with the string "blue", it turns around and sets its own bodys background color to that value.
If all your documents share same origin, it should work, so calling
window.parent.frames['other frame name'].contentWindow['func']()
from within some frame will invoke func from neigbour iframe.
Behold hacky simplistic datauri example in Firefox (Chrome considers dataURI documents as always different origin, so it raises security exception)
data:text/html;charset=utf-8,<iframe id="a" src="data:text/html,<h1 id=a>0</h1><script>function inc(){a.innerHTML++}</script>"></iframe><iframe id="b" src="data:text/html,<button onclick=window.parent.frames.a.contentWindow['inc']()>inc in prevous frame</button>"></iframe>
// First iframe called (ifr_url) in Master page.
// Second iframe called (ifr_tab5) inside the master page.
// I want to call function (Hallow()) in second iframe.
var win = document.getElementById("ifr_url"); // reference to iframe's window
var doc = win.contentDocument? win.contentDocument : win.contentWindow.document;
var form = doc.getElementById('ifr_tab5').contentWindow.Hallow();
I am trying to understand importNode in html using the following example.
Suppose we have a content.html:
<html>
<body>
<nav id="sidebar1" class="sidebar">
Hi there!
</nav>
</body>
</html>
and a main.html:
<html>
<body>
<iframe src='content.html' hidden='true'></iframe>
<script>
var idframe = document.getElementsByTagName("iframe")[0];
var oldNode = idframe.contentWindow.document.getElementsByTagName("nav")[0];
var newNode = document.importNode(oldNode, true);
document.getElementsByTagName("body")[0].appendChild(newNode);
alert("HI!!!");
</script>
</body>
</html>
I am getting the error:
TypeError: Argument 1 of Document.importNode is not an object.
var newNode = document.importNode(oldNode, true);
What is the proper way to get an element form an iframe and insert it into my html?
You can only access content of the iframe document after the iframe document has been loaded. This can be accomplished different ways:
either by putting your accessing code into load handler of the main (that contains iframe element) document window,
or inside a DOMContentLoaded event listener of the document loaded in iframe.
Below is example of using load event of window of the main document:
window.addEventListener('load', function() {
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.body.insertBefore(newNode, document.body.firstChild);
}, false);
Otherwise, iframe content is not yet loaded when you try to access it.
See the live example at JSFiddle (iframe content is placed encoded in the srcdoc attribute of the iframe just because I'm not aware of ability to create subdocuments at JSFiddle without creating a separate fiddle).
How to add a click event to <p> elements in iframe (using jQuery)
<iframe frameborder="0" id="oframe" src="iframe.html" width="100%" name="oframe">
There's a special jQuery function that does that: .contents(). See the example for how it's works.
Your best best bet is to invoke the iframe AS LONG AS it's part of your domain.
iframe.html
<html>
<head>
<script>
window.MyMethod = function()
{
$('p').click();
}
</script>
</head>
<body></body>
</html>
And then use
document.getElementById('targetFrame').contentWindow.MyMethod();
To invoke that function.
another way is to access the iframe via window.frames.
<iframe name="myIframe" src="iframe.html"/>
and the javascript
child_frame = window.frames['myIframe'].document;
$('p',child_frame).click(function(){
alert('This click as bound via the parent frame')
});
That should work fine.
Wanted to add this, as a complete, copy-paste solution (works on Firefox and Chrome). Sometimes it is easy to miss to remember to call the event after the document, and so the iframe, is fully loaded:
$('#iframe').on('load', function() {
$('#iframe').contents().find('#div-in-iframe').click(function() {
// ...
});
});
The iframe must be on the same domain for this to work.
By giving a reference to the IFrame document as the second parameter to jQuery, which is the context:
jQuery("p", document.frames["oframe"].document).click(...);
To access any element from within an iframe, a simple JavaScript approach is as follows:
var iframe = document.getElementById("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow;
// Get HTML element
var iframeHtml = iframeDoc.getElementsByTagName("html")[0];
Now you can select any element using this html element
iframeHtml.getElementById("someElement");
Now, you can bind any event you want to this element. Hope this helps. Sorry for incorrect English.
Is there a way to capture when the contents of an iframe have fully loaded from the parent page?
<iframe> elements have a load event for that.
How you listen to that event is up to you, but generally the best way is to:
1) create your iframe programatically
It makes sure your load listener is always called by attaching it before the iframe starts loading.
<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...';
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>
2) inline javascript, is another way that you can use inside your HTML markup.
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>
3) You may also attach the event listener after the element, inside a <script> tag, but keep in mind that in this case, there is a slight chance that the iframe is already loaded by the time you get to adding your listener. Therefore it's possible that it will not be called (e.g. if the iframe is very very fast, or coming from cache).
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>
Also see my other answer about which elements can also fire this type of load event
Neither of the above answers worked for me, however this did
UPDATE:
As #doppleganger pointed out below, load is gone as of jQuery 3.0, so here's an updated version that uses on. Please note this will actually work on jQuery 1.7+, so you can implement it this way even if you're not on jQuery 3.0 yet.
$('iframe').on('load', function() {
// do stuff
});
There is another consistent way (only for IE9+) in vanilla JavaScript for this:
const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');
iframe.addEventListener('load', handleLoad, true)
And if you're interested in Observables this does the trick:
import { fromEvent } from 'rxjs';
const iframe = document.getElementById('iframe');
fromEvent(iframe, 'load').subscribe(() => console.log('loaded');
Note that the onload event doesn't seem to fire if the iframe is loaded when offscreen. This frequently occurs when using "Open in New Window" /w tabs.
Step 1: Add iframe in template.
<iframe id="uvIFrame" src="www.google.com"></iframe>
Step 2: Add load listener in Controller.
document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
$scope.loading = false;
$scope.$apply();
});
You can also capture jquery ready event this way:
$('#iframeid').ready(function () {
//Everything you need.
});
Here is a working example:
http://jsfiddle.net/ZrFzF/