I load an iFrame of another page of my website dynamically. I would like to close the iFrame by clicking on an "X" button within the iFrame. I have created a Jquery function in my main JavaScript file, and I have also added some Javascript to my page frame itself (within my own domain).
In my main JS file:
var closeIFrame = function() {
$('#iframeContact').remove();
$("#overlay").toggleClass("overflowhidden overflow");
};
On my iFrame page (at the bottom of the page's HTML):
<script>
$("#menuOverlayBack").click(function(){
parent.closeIFrame();
}
I even have tried putting an "onclick" HTML element on my button to no avail:
<i class="menuOverlayBack material-icons" id="menuOverlayBack" onclick="parent.closeIFrame()">arrow_back</i>
Try using jQuery to modify the visibility of the iframe when "x" is clicked..
$("#close").click(function() {
$("#myIframe").css({"display": 'none'});
});
Related
I have a button and an iframe. When button is clicked, it opens a page in the iframe. I have another button, when it is clicked, it is supposed to add custom html to the already loaded page in the iframe, but it is not working.
HTML:
Load page in Iframe
Update iframe
<iframe src="" width="100%" height="500px" id="main_iframe"></iframe>
The jQuery to load page in iframe is working fine:
function site_load_1() {
$('#main_iframe').attr('src', "https://bing.com");
}
The jQuery to update iframe with custom html is not working:
function update_iframe() {
var myFrame = $("#main_iframe").contents().find('body');
var newContent = "<h1>hello</h1>";
myFrame.html(newContent);
}
However, it does work when the iframe is empty, as in, when page has not been loaded into it via the first button.
I have a web page in my application where I have an iframe loaded on the Page load.
The iframe displays a custom document which is created in our application. The iframe name is generated on the fly and the contents is loaded by a custom Javascript framework.
The document has two main vertical sections.
The first vertical section has page list which is displayed to the user so that user can navigate to nth page.
<iframe id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0">
<div class="containerFull">
<div class="allPages" id="allPages">
<a class="pagenumber_001" href="/document/2339389/15031550">Page 1</a>
<a class="pagenumber_002" href="/document/2339389/15031550">Page 2</a>
<a class="pagenumber_003" href="/document/2339389/15031550">Page 3</a>
</div>
<div id="pagesArea">
<div class="docPage" id="page_body_001">
<div id="docPageSection-001-1">
PAGE CONTENT
</div>
</div>
</div>
</div>
</iframe>
On page load, The iframe will be displaying the page 1.
By clicking the anchor tag, user can navigate to any page. On click of the anchor tag, the iframe is reloaded with the page details which is sent to back end.
Since some of the pages were bigger in width and user doesn't want the horizontal scroll to be present, I was adjusting the width of the iframe container and the two divs so to make them appear properly on the window.
`
<script src="adjust_doc_view.js"></script>
// the above script contains a jQuery function called updateView which basically
// has css related jQuery statements.
jQuery(window).on('load', function () {
setTimeout(updateView, 100); // timeout is used to wait for the iframe to load completely
});
`
The Issue which I am facing is the updateView is triggered only once on the page load. On all subsequent reload of Iframe, the updateView is not called. That is because I am not loading the whole page. I have other divs which are above the iframe which are constant. Let me know how to trigger updateView on every reload of iframe contents.
I tried adding the onclick function on anchor click event, but it works only once. I am not sure why.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery(window).on('load', function () {
// use setTimeout() to execute
// Setting the timeout to zero as no delay is experienced in this page.
setTimeout(updateView, 0);
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("a[class^='pagenumber']").on('click', function() {
setTimeout(updateView, 1000);
});
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("div[id^='docPageSection']").on('load', function() {
setTimeout(updateView, 1000);
});
});
Please help me out here. Please correct me if I am doing something wrong.
Thanks in advance.
How about adding the onload attribute to your iframe and calling updateView() from there?
<iframe onload="setTimeout(function() { updateView(); }, 1000);" id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0"></iframe>
You could use the ajaxComplete inside the iframe to trigger your update:
$(function() {
// iframe in main page
$('iframe').on('load', function() {
updateView()// first load update
// reference to window and document inside frame
var win = this.contentWindow || this,
doc = this.contentDocument || this.contentWindow.document;
// have to use iframe version of jQuery
win.$(doc).ajaxComplete(function(event, xhr, settings) {
// fires every time an ajax request completes in iframe
updateView()
});
});
});
DEMO
I have an iframe that links to another internal web application.
There's a side panel with a list of links that changes the src of the iframe. Sometimes if there's a lot of data, the iframe site takes a while to load. I want to put a spinner icon when a link is clicked and hide it when the frame is loaded.
I change the src using $('#myiframe').attr('src', urlVar) in a click function for the links. I can show the spinner on click.
The problem is, how do I hide it? How do I find out that the iframe has finished loading?
I tried using $('#myiframe').load(function() { }) but that only works on the initial load (i.e. for the first link I click), not for subsequent loads (if I click on another link).
This javascript works for me :
function loadNewUrl (url){
if(url === undefined) url = 'http://example.com?v=' + Math.random();
var ifr = document.getElementById('myiframe');
ifr.setAttribute('src',url);
ifr.onload = function() {
alert('loaded');
};
}
My bootstrap modal play a video that loads in a iframe.
Now i want to make my iframe data null first when click modal close button then insert a iframe from background on this iframe
my code
$('#abc_55').on('hide', function () {
var newSrc="http://www.youtube.com/embed/XGSy3_Czz8k";
document.getElementById("preview-frame").src='';
document.getElementById("preview-frame").src=newSrc;
});
But its not work
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 */ });