I have an HTML page that opens an IFRAME ... But at some point, after some user interactions with the IFRAME, it should close itself. I've tried various commands such as:
var fram = $("IFRAME_NAME");
fram.parentNode.removeChild(fram);
this.remove();
this.style.display='none';
var frame = parent.frames['IFRAME_NAME'];
frame.remove();
frame.html("");
document.IFRAME_NAME.document.body.innerHTML = '';
Thanks.
Considering markup like this:
<iframe id="myframe" />
The following jQuery code will remove it in the host page:
$("#myframe").remove();
To close the iframe from within iframe itself, define the function in the host page:
function closeFrame() {
$("#myframe").remove();
}
Then in the code running in the iframe, call:
parent.closeFrame();
If you are using jQuery (and I've understood your question properly), you can use a code as simple as:
<iframe src="http://www.google.com" id="testframe"></iframe>
<script>
$(document).ready(function() {
setTimeout(function () {
$('#testframe').remove();
},5000);
});
</script>
http://jsfiddle.net/pYHx5/
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 have a blank page with an iframe that displays a form from an external domain outside my control. I'm trying to write a bit of Javascript/jQuery that will close the window after the form is submitted.
Here's my code:
<body>
<script>
$('iframe input[type="submit"]').on('click', function () {
window.close();
});
</script>
<iframe src="SomeOtherDomain.com"></iframe>
</body>
Nothing happens when I click the button though. What am I doing wrong?
EDIT:
I'm not sure if it makes a difference or not but it looks like the iframe calls a second iframe... I've got an iframe inside an iframe.
I believe you need to provide some time(100 ms) to submit the form data. Please try this by calling the deleteIframeTimer
function deleteIframeTimer(){
var t = setTimeout("deleteIframe()", 100);
}
function deleteIframe() {
var iframe = parent.document.getElementById("myframe");
iframe.parentNode.removeChild(iframe);
}
So long as your iframe src is from the same domain this will work:
$(document).ready(function () {
var f = $('#myframe')[0];
var win = f.contentWindow;
//Created test environment in IFrame with ID "myframe"
$(win.document.body).append('<form><input type="submit" value="click me"/></form>');
$(win.document).on('submit', function () {
setTimeout(function () { $(f).remove(); }, 1000)
});
});
Simply remove the element but remember you can't get the contentDocument from an iframe that is not of the same domain.
Working solution:
https://jsfiddle.net/f3eayurw/
I have an iframe of a certain page from a site that I'm using, but I don't want all the parts of that page to be displayed with the iframe. Particularly, there's a navigation sidebar on the page that I don't want to be in the iframe. I'm trying to achieve this with the javascript seen below, but I can't quite figure it out.
<iframe width="800" height="800" src="scores/new?site_id=193">
<script>
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
</script>
</iframe>
For security reasons you can't run javascript through iframes. There are some exceptions if you're on the same domain but for the most part you should really avoid it.
If the iframe isn't a site you can control then there's pretty much nothing you can do. If you do control the other site and it's a different domain you might be able to work with the postMessage functions.
Edit: Check out the docs that Mozilla has up here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You'd need to create a listener on the inside that handles a message and hides your sidebar. Then on the parent send a message to the iframe to trigger that function.
Parent:
var iframe = document.getElementById('#iframeID');
iframe.contentWindow.postMessage('iframeTrigger');
Iframe:
window.addEventListener('iframeTrigger', hideSidebar);
function hideSidebar() {
//do stuff
}
You can insert a control in the iframed page
//inside the iframed page
var iframe = (function() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
})();
if(iframe === true) {
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
}
Hope this could suit your need.
This should work theoretically, and it works in console. But this doesn't work in the HTML, although you are trying it from the same domain, because of security reasons. I just wanted to tell my view and I tried this:
<iframe src="http://output.jsbin.com/figujeyiyo" frameborder="0" id="ifrm">
Sorry, iframes not supported.
</iframe>
<script>
console.log(document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div"));
e = document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div")[0];
console.log(e);
e.parentNode.removeChild(element);
</script>
You need to execute the code when the page loads, you can do it like this:
document.addEventListener('DOMContentLoaded', function() {
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
});
I've looked at
Insert content into iFrame and their fiddle at http://jsfiddle.net/8VP4y/3/ to come out with the following codes which i'm having problem.
i've created a jsfiddle for my problem below.
https://jsfiddle.net/cy87j70t/2/
$( document ).ready(function() {
$('#card2').html( '<iframe id="myFrame"></iframe>' );
var myFrame = $("#myFrame").contents().find('body');
var myFrame2 = $("#myFrame2").contents().find('body');
myFrame.append('<p>OH NO TOKEN IS FOR myFrame Original ');
myFrame2.append('<p>OH NO TOKEN IS FOR myFrame 2 ');
});
AND the HTML looks like this;
<div id='card2'>
</div>
<iframe id='myFrame2'>
</iframe>
I'm trying to create a iframe using javascript, then writing to the iframe with content from JSONP (i've ommitted that part for easy debug);
I'm not sure why it's not writing to the iframe, is it because the iframe is created by javascript?
I've tried append, html, after, prepend but nothing seems to allow me to write to the iframe
No, it's not a bug.
Updated jsfiddle
The right way is:
$(function () {
$('#card2').html('<iframe id="myFrame"></iframe>');
// add the src attribute so that the load event will take place in every browser..
$("#myFrame").attr('src', 'about:blank');
// wait for the iframe is loaded
$("#myFrame").on('load', function(e) {
var myFrame = $("#myFrame").contents().find('body');
myFrame.append('<p>11111111OH NO TOKEN IS FOR myFrame Original</p>');
});
var myFrame2 = $("#myFrame2").contents().find('body');
myFrame2.append('<p>2222222222 OH NO TOKEN IS FOR myFrame 2</p>');
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id='card2'>
</div>
<iframe id='myFrame2'>
</iframe>
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.