How do i close the iframe using javascript.I found some method to do that using
window.parent.close();
but this method close the whole tab.But what I need is only close the iframe.Any one got a solution for that??
An iframe isn't a window, it can't be closed. You may hide it using
$(theIFrame).hide();
or remove it if you won't use it again :
$(theIFrame).remove();
If you want to hide or remove the iframe from a script inside the iframe document, you must get the relevant element first. You can do this :
var iframe = $(parent.document).find('iframe').filter(function() {
return this.src==location.href;
});
iframe.remove();
If you don't do this from the iframe, you should have some kind of reference. Or you may do it indiscriminately as
$('iframe').remove();
You cant close an iframe.
you must remove the node with elem.removeChild(elem_iframe)
Related
I am writing a userscript for a website to change link targets from "_blank" to "_self".
The website's links are all handled by an EventListener on Click action, which reviews the id attribute for every <a> element to set the click URL and load it in a new tab. None of the <a> elements have a href or target attribute.
I would like all clicked links to load in the same tab (rather than a new tab).
Is there any way to modify link targets set by an event listener, or to simply set/override the default link target for all links on a webpage?
Provided you want to override the behavior of links that open in a new tab, you could override window.open as such:
window.open = (open => (href => open.call(window, href, '_self')))(window.open);
For anchor tags with an explicit target of _blank, you could theoretically override the click method to force the target:
window.HTMLAnchorElement.prototype.click = function() { window.open(this.href, '_self') };
However, this is in fact a hacky solution and might not be the best idea to use in production.
you can do select your element with document.querySelector().target = "_self"
EDIT Jan 12, 2023: there is a much better and easier way to do this, if you're using Tampermonkey.
GM_addElement allows you to do exactly what I described in the request, to insert code into actual page:
https://www.tampermonkey.net/documentation.php#api:GM_addElement
I used the script version, to add a function (you have to enclose it in quotes, like text).
This solution works much better with stricter websites and browsers, so you won't get CSP errors.
OLD ANSWER:
The answer to this question solved my issue:
How to overwrite a function using a userscript?
I re-wrote the open function from skara9's answer, and then inserted it with the addJS_Node function from the above question.
Userscripts are separated from the target page, hence why simply re-declaring the function was not overwriting the default global open function.
I want to get an element from an iFrame and click it. Getting the element succeeded. Unfortunately i cant get the element within the iframe clicked. Anyone with a solution?
Thanks!
$(document).ready(function(){
var frame = $('#f314dbebb8'); //ID from the frame
console.log(frame);
});
Is this what you are trying with
document.getElementById('iframeResult').contentWindow.document.getElementById('buttonId').click()
where iframeResult is Id of iframe and buttonId is Id of element to be clicked ??
Do you mean you are trying to "click it" programmaticly, like via JavaScript? Or a user interaction like with your mouse and cant?
If you are trying via JavaScript its not going to work. Look up something called "same origin security". JavaScript cannot access other pages load via an iframe for security purposes. http://javascript.info/tutorial/same-origin-security-policy
Have you tried document.getElementById('elementid').click();?
I am trying to create a bookmarklet functionality similar to the thefancy.com site, I created a bookmarklet button which when clicked loads a js file which is located on some other website http://wonderstreet.localhost.com and append it in the head section of the current document, it then creates a iframe and append it in the body of the current document.
The above mentioned js file contains various functions which I need to call from this iframe, for example, there is a "Close" button in the iframe which when clicked should call the function which is located in the above js file (this function will close or remove the iframe)
The iframe gets created and displayed correctly.(I need to fetch all the images of current document and show it in iframe)
Problem is that when I click close button it says: ReferenceError: function is not defined
Can somebody please help and let me know how can I solve this ?
[I am using core javascript and not jquery]
Here is the code from the js file =>
function create_bookmarklet_iframe(thewonderstreet_userid) {
var ifra=document.createElement('iframe');ifra.src="http://localhost.com/index.php/image_picker?userid="+userid;ifra.setAttribute("id","bookmarklet_iframe");ifra.setAttribute('allowtransparency',true);ifra.setAttribute('style','width:279px;height:372px;border:1px solid #4c515c;position:fixed;top:10px;right:10px;z-index:10000001;margin:0;background-color:#eff1f7;');void(document.body.appendChild(ifra));
}
function remove_bookmarklet_iframe(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
}
And this is the bookmarklet code:
javascript:%20(function%20()%20{%20%20%20%20%20userid%20=%20'724c5a0e49e4dac588a90e17233982493027197d';%20%20%20%20%20var%20search_url%20=%20'http://localhost.com/javascript/bookmarklet_js.js';%20scripts_finder%20=%20document.getElementsByTagName('script');%20var%20found_url%20=%200;%20for%20(var%20i%20=%20scripts_finder.length;%20i--;)%20{%20var%20actual_url%20=%20scripts_finder[i].src.split("?");%20if%20(search_url%20==%20actual_url[0])%20{%20found_url++;%20}%20}%20if(found_url%20<=%200)%20{%20s=document.createElement('SCRIPT');s.type='text/javascript';s.src='http://localhost.com/javascript/bookmarklet_js.js?_='+(Math.random());document.getElementsByTagName('head')[0].appendChild(s);%20}%20%20var%20s_id%20=%20'bookmarklet_iframe',%20%20%20%20%20%20%20%20%20s_avail%20=%20document.getElementById(s_id),%20%20%20%20%20%20%20%20%20can_continue%20=%20true,%20%20%20%20%20%20%20%20%20t;%20%20%20%20%20if%20(s_avail)%20{%20%20%20%20%20%20%20%20%20can_continue%20=%20false;%20%20%20%20%20%20%20%20%20alert('Alreadyopen');%20%20%20%20%20}%20%20%20%20%20setTimeout(function()%20{%20if%20(can_continue)%20{%20create_bookmarklet_iframe(userid);%20}%20},1000);%20})();
Ok, I solved it myself, what I was doing was wrong, instead of creating an iframe I used div, so basically I eliminated iframe, created div by javascript and appended it to document body.
Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });
A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple:
$('.readmore').each(function(i){
$(this).popup();
});
and the link would look like this:
<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>
The plugin could also accept arguments for width, height, a different url, and more data to pass through.
The problem I'm facing right now is printing the lightbox. I set it up so that the lightbox has a print button at the top of the box. That link would open up a new window and print that window. This is all being controlled by the lightbox plugin. Here's what that code looks like:
$('.printBtn').bind('click',function() {
var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
thePopup.print();
});
The problem is the script doesn't seem to be waiting until the window loads. It wants to print the moment the window appears. As a result, if I click "cancel" to the print dialog box, it'll popup again and again until the window loads. The first time I tried printing I got a blank page. That might be because the window didn't finish load.
I need to find a way to alter the previous code block to wait until the window loads and then print. I feel like there should be an easy way to do this, but I haven't found it yet. Either that, or I need to find a better way to open a popup window and print from the lightbox script in the parent window, without alternating the webpage code in the popup window.
You should put the print function in your view-details.php file and call it once the file is loaded, by either using
<body onload="window.print()">
or
$(document).ready(function () {
window.print();
});
Got it! I found an idea here
http://www.mail-archive.com/discuss#jquery.com/msg18410.html
In this example, they loaded a blank popup window into an object, cloned the contents of the element to be displayed, and appended it to the body of the object. Since I already knew what the contents of view-details (or any page I load in the lightbox), I just had to clone that content instead and load it into an object. Then, I just needed to print that object. The final outcome looks like this:
$('.printBtn').bind('click',function() {
var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
$('#popup-content').clone().appendTo( thePopup.document.body );
thePopup.print();
});
I had one small drawback in that the style sheet I was using in view-details.php was using a relative link. I had to change it to an absolute link. The reason being that the window didn't have a URL associated with it, so it had no relative position to draw on.
Works in Firefox. I need to test it in some other major browsers too.
I don't know how well this solution works when you're dealing with images, videos, or other process intensive solutions. Although, it works pretty well in my case, since I'm just loading tables and text values.
Thanks for the input! You gave me some ideas of how to get around this.
Are you sure you can't alter the HTML in the popup window?
If you can, add a <script> tag at the end of the popup's HTML, and call window.print() inside it. Then it won't be called until the HTML has loaded.