Detaching/opening an iframe into a new window - javascript

I have an iframe setup within a page and basically want to know whether it's possible to have a button in this iframe and when pressed, opens the iframe into a new browser window, showing the contents of the iframe.
I am planning on using either JavaScript or jQuery to achieve this. I am using IE6.

$('.button').click( function(){
window.open($('iframe').attr('src'),'mywindow','width=400,height=200');
});

For what you need (to open the same page where this button), no matter if it's an iframe or if in the home page.
The only difference is if you want that data to open in new window, are a reflection of the same page, such as data that can be an input.
If you care about who are the same data:
$("#mybuttonOpenWin").click(function(){
window.open(window.location.href);
});
If you are interested, you can try this code:
$("#mybuttonOpenWin").click(function(){
var mref = window.open(window.location.href);
(function = onReadyRef(xref){
if(xref.window.document.readyState=="complete"){
$(xref.window.document).find("body").html($("body").html());
}
else{
onReadyRef.call(this, xref);
}
})(mref);
});

Related

How to refresh another page using javascript without opening the same page in a new tab

Is it possible to refresh a page from another page using Javascript or JQuery without opening the same page in a new tab.
JS:
var newtab = window.open('http://localhost:8081/app/home');
newtab.document.location.reload(true);
I tried the above, but here, it will open a new tab, with the same page, which is already opened in the browser.
Please suggest a method.
I got the idea from a previous Question , here they used window Object Reference to reload the popup window, but for me it wont work, because, the parent window and child window runs in 2 different ports. So using the same trick, what i did is :
HTML:
<a onclick="openNewTab()">app2</a>
<a onclick="refreshExistingTab()">Refresh</a>
JS:
<script>
var childWindow = "";
var newTabUrl="http://localhost:8081/app/home";
function openNewTab(){
childWindow = window.open(newTabUrl);
}
function refreshExistingTab(){
childWindow.location.href=newTabUrl;
}
</script>
refreshExistingTab() this instend of refreshExistingTab
take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window.open
basically if you do window.open and specify a window name it will overwrite that window with the url you provided.
so if you open the page each time with same window name, it should overwrite it each time you do it again from that other page.

Open a new window in JS but the browser is scrolled straight down to the bottom automatically

I was developing a struts web application, in one of my JSP I created a button to open a new window. The way I did it is:
window.open(location,'_blank');
everything works fine except the new window is always scrolled down to the bottom itself. How to show the top part instead?
I am using Chrome.
Include place this JS at the bottom of the page just before the closing body tag.
<script>window.scrollTo(0,0);</script>
Or you could simply use jQuery if your page is already including it:
<script>$(document).ready(function(){$(window).scrollTop(0);});</script>
Try something like this:
var newWindow = window.open(someUrl, '_blank');
newWindow.onload = function(){
newWindow.scrollTo(0, 0);
}
newWindow.onload();
Try this
window.open(location,'_blank','top=50');

How do I transfer a value from a text box to a new window using Javascript?

I have created a form so the user can complete his name, last name, credit card number etc.
All the information is provided by the user.
When the user has ended his work he should press a button and a new window pops up with the user's information revised.
Anyone has a suggestion on this? I would be grateful.
opener.document.getElementById("text").value = txt;
You can reference the child window from the parent one and vice-versa. When you open a popup window with window.open(url, options), it returns a reference to the child window. You can add handlers to it. Using jquery:
var w = window.open(url);
$(w).load(function() {
alert("I've just loaded");
});
From the child window, you can use the variable opener to reference the parent window. So if you want to grab info from the parent window, you'll use something like (again jquery):
var first_name = $(opener.document).find('.first-name').text();
Got this info here: http://sharkysoft.com/tutorials/jsa/content/053.html
From a user experience point of view, if you just want to open a popup to confirm the data, without server side processing, I find opening a popup disturbing and would rather use an overlay on the same page.

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

How can I resize a modal iframe when a new page loads in it?

I have several linked pages I want to display in a modal iframe. The pages are not the same size and I want to be able to resize the iframe when each new page is loaded. I have looked at several jquery plugins to create the iframe, but can't figure out how to resize any of them. I am currently experimenting with prettyPhoto and nyroModal, but am open to suggestions. I just need to make it work. Also I am not very good with JavaScript, but I am trying to learn.
NOTE: all my pages are on my web server, so there is no issue with cross domain.
Thanks for all the quick responses. I'm headed to bed but look forward to trying out your suggestions when I wake up.
Try putting this in the iframe:
document.onload = function() {
var i = parent.document.getElementById('myIframe');
i.style.width = document.body.offsetWidth+"px";
i.style.height = document.body.offsetHeight+"px";
}
When loading pages to iframe you probably will encounter cross-domain problems. Accessing page inside the iframe from parent's JS is blocked.
If you want to do it easily - keep track of what is loaded int o the iframe in your code and resize it manually to hard-coded dimensions.
Create an array of dimensions you want to use for each page and use this function:
function() {
var i = document.getElementById('myIframe');
var sr=i.src;
i.style.width = myDimensionsArray[sr][w]+"px";
i.style.height = myDimensionsArray[sr][h]+"px";
}
You can use postMessage for this. In your iframe write this:document.body.onload=function(){
parent.postMessage("resize_me", "*");
}In your main page:window.addEventListener("message", function(e){
if(e.data=="resize_me") {
//resize the iframe
}
}
There are 2 cases here:
iframe is loaded after the modal is open
iframe is loaded before the modal is open
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(".modal").on('shown.bs.modal', function () {
resizeIframe(document.getElementById(IFRAME_ID));
});
window.onload=function(){
document.getElementById('IFRAME_ID').addEventListener('load', function(){
resizeIframe(document.getElementById(IFRAME_ID));
});
}
In case of
When the iframe is loaded, the iframe will resize
when iframe is loaded, as the modal is invisible, it wont be resize hence it needs to resize again the the model is shown.

Categories