We Keep Coding

Cross domain iframe control/loading with Jquery/CSS

I need to embed my website onto another website, but remove the header and footer from my website and essentially just show the content.
The iframe gets built fine and loads the content into the page, and using an onload event, I've set the visibility so that the 'flashing' is removed on load. Separately in a JS file, I'm then removing the header and footer on document ready, which seems to remove them prior to the visibility kicking in. On the first load, everything works fine. When you navigate in the iframe, clicking a link, for instance, the window reloads with the correct information, except for a few seconds, it loads the header and footer and the removes them.
Ideally, the header and footer should never be shown at all.
The onload event is inline JS with the iframe, whilst the document ready is loaded when the iframe is loaded.
The document ready code (external Js)
if (window.location !== window.parent.location) {
setTimeout(function () {
$('.header').remove();
$('.footer').remove();
}, 500);
}
and the code to be embedded onto the separate domain/website:
<script>
function loadIframe() {
var ifr = document.getElementById("mySite");
ifr.style.height = '75vh';
}
</script>
<iframe style="visibility:hidden;" id="mySite" onload="loadIframe()" class="catalog-frame" src="http://xxxxxxx.com/about" width="100%">
</iframe>
Essentially, and perhaps the easiest way to manage this would be to, on change of the URL inside the iframe, hide the contents, then onload, show them again, but I'm having trouble detecting whether the URL inside the iframe is about to change/changing, to hide the content/hide the iframe.
As I have access to the actual contents being loaded into the iframe, is there actually a simpler solution here, although I will not have control over the parent domain?

As you mentioned you have no control on parent, so in my opinion you can do the following:
Add a script tag in your document's head as following:
if (window.location !== window.parent.location) {
$("body").css("display", "none");
//$("loading-pic").css("display", "block");
}
Then at the bottom of you body, add the following script for the function on ready function:
$( document ).ready(function() {
$('.header').remove();
$('.footer').remove();
//$("loading-pic").css("display", "none");
$("body").css("display", "block");
});
What should happen this way is: Whenever you will click any link on iFrame, nothing will be shown, and when the document would be ready, our last script will remove header and footer and then display the body.
You can also show a loading-pic while your content is being loaded.
Alternatively, you use a variable to store whether the current session is in iFrame or on a separate window, and send it as GET or POST with your each link and remove the header and footer from server side if required.

How to trigger iframe load event more than once when changing iframe source

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

Disable main browser, display popup with window.open and do some actions

I'm using ajax for some function for my website, in success function I write some code:
success: function(html) {
window.open("http://localhost/demo/index.php",'name','height=243,width=800');
}
There are some problems I met:
This page (popup window) can not load css
I can disable main browser
I want to redirect main window after popup window is closed
How can I do that?
P/S: If I can't do that, how do I display popup when success function is called?

1. This page (popup window) can not load css
There might be some problem with your style urls. Check them in browser console.
2. I can disable main browser
You can't disable main browser, but As per my understanding you are trying to block page elements. So block UI can help. Use block UI to block your page contents and it will be automatically removed when you will redirect your main page.
3. I want to redirect main window after popup window is closed
You need to bind a custom redirect method to your window close to redirect your main page when window is closed.
success: function (html) {
myWindow = window.open("http://localhost/demo/index.php", 'name', 'height=243,width=800');
myWindow.onbeforeunload = function () {
return RedirectPage();
}
function RedirectPage() {
window.location.location.href = "http://www.yoursite.com";
}

You can redirect main window using:
window.parent.location.href = "http://www.site.com";
Regarding popup window not loading css, it might be issue with improper CSS include URL's in popup page html.

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.

Printing a web page using just url and without opening new window?

<html>
<head>
<script type="text/javascript">
var URL = "http://localhost:8000/foobar/";
var W = window.open(URL); **Note1**
W.window.print();
</script>
</head>
<p> Print ME...............</p>
</html>
I am using this script to print a webpage.
My views render this page and The JS take care all other things.
But I dont want to open new window for that. So, What should I use instead of window.open(URL) so no new window opens. Similarly, I don't want to open new window for print function.So, Whenever I render this page it do all stuff on the same page. No new window, No new tab. How can I achieve this. I google but nothing seems working.

You can do this using a hidden iFrame (I'm using jquery for the example):
function loadOtherPage() {
$("<iframe>") // create a new iframe element
.hide() // make it invisible
.attr("src", "/url/to/page/to/print") // point the iframe to the page you want to print
.appendTo("body"); // add iframe to the DOM to cause it to load the page
}
This will load the page you want to print. To print, you can add javascript code to the print page so that it gets printed after loading:
$(document).ready(function () {
window.print();
});
This will print the page without showing a new window. I've tested this in IE8,9 and Google Chrome, so I'm not sure if this works for Safari or Firefox, though.

There's a nice example on MDN how to do that with a hidden iframe https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it

In reference to #andragon's answer. updated on top of it.
You can do this using an iFrame(Not hidden because hidden iFrame prints the blank page in latest versions of browsers. You can hide after the print is triggered)
function loadOtherPage(link) {
$("<iframe class='printpage'>") // create a new iframe element
.attr("src", link) // point the iframe to the page link you want to print
.appendTo("body");
}
This will load the page link you want to print.
On loading the print page link you can call javascript.
$(document).ready(function () {
window.print();
});
window.onafterprint = function () {
$('.printpage', window.parent.document).hide();
}
This will print the page from the same window and onafterprint Event is triggered when a page has started printing, or if the print dialog box has been closed
window.parent.document is to hide the iFrame block on the parent page.

I'm using Asp .net core with razor html as view, in this case I have used window.print() to print the page then used window.onafterprint to back to the page where used want to be redirected.
You can use ViewBag to replace the "/NewSales" URL.
NOTE: window.onafterprint will be called whenever user clicks Cancel/Submit/Print button in that pop-up.
$(document).ready(function () {
window.print();
window.onafterprint = function () {
window.location.href = "/NewSales";
}
});

function CallPrint() {
var prtContent = document.getElementById('main');
var WinPrint = window.open('', '', 'width=800,height=650,scrollbars=1,menuBar=1');
var str = prtContent.innerHTML;
WinPrint.document.write(str);
WinPrint.document.close();
WinPrint.focus();
}
Call this javascript function on Print button click."main" is the id of the div which we have to print without opening into new window.I want to notify that this will print the current page div.
Try and rever in case of any issue.
Thanks,
Gourav