We Keep Coding

Add custom HTML in iFrame that already has a page loaded in it

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.

How to execute a jQuery function on click of an anchor tag which is placed inside an Iframe

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

Close iFrame On Button Click Within Itself

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'});
});

Need to close iframe on click of cancel and print button in printpreview dialog

I am opening an iframe on click of print button and need to close that iframe on click of cancel or print button. On click of cancel or print button iframe getting disappear but still I can see the same iframe in DOM so need to remove the same.
Is there any callback event like onclick on print or cancel button in printpreview in javascript???
Thanks in advance.....

What do you mean by "opening/closing" an iframe ?
You can either show/hide an iframe on click event
HTML
<h1>click me to show/hide the iframe</h1>
<button onclick="showHide()"> Click-2</button>
<iframe id="myframe" style="display:none" src="home.html"></iframe>
javascript
function showHide()
{
$("#myframe").toggle();
}
or
You can open a new window and attach window.close() event on particular action.
HTML
<h1>click me to open a new window</h1>
<button onclick="openWindow()"> Click-1</button>
javascript
function openWindow()
{
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write(" <h5>click me to clsoe this window</h5>");
myWindow.document.write("<button onclick='window.close()'>close</button>");
}
Demo
Cheers!

jQuery Mobile popup on page load with Rails

I am trying to open a popup on page load using jQuery Mobile and Rails.
The popup can be opened with a link, but I can't make it open on load.
HTML code
<div data-role="popup" id="popup-choix" data-history="false" data-overlay-theme="a" data-transition="flow" data-position-to="window">
<ul>...</ul>
</div>
Javascript code
$(document).on("pageshow", function() {
$('#popup-choix').popup('open');
});
I checked with Chrome and the Javascript is correctly linked to the page.
I have a link on the page to open the popup. It works perfectly.
<div class="div-popup">...</div>
I guess the problem is with my Javascript then...
UPDATE
I placed the Javascript in popup.js, which is then called with the application.js manifest.
UPDATE 2
I wrote the javascript in popup.js and call it with the manifest.

Updated
Note: for Ruby on Rails users read this comment.
This is the correct way to open a popup, once page loads/shows.
$(document).on("pageshow", function() {
$('#popup-choix').popup('open');
});
In some browsers, popup doesn't show once the page loads, therefore, adding timeout to open the popup is essential.
Source
$(document).on("pageshow", function() {
setTimeout(function () {
$('#popup-choix').popup('open');
}, 100); // delay above zero
});
If you want to open for a specific page, add '#PageId' instead of document.