I'm developing a little site that loads a local HTML file into an iframe on click of a button. The iframe should be resized based on the size of the content of the local HTML file. The following almost works -- however, I need to click the "Fill" button twice in order to resize the iframe (Firefox).
I'm pretty sure it's got something to do with how events are being handled, but I've tried e.preventDefault() and return false without any luck. Any ideas?
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Load</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#run").click(function(e) {
e.preventDefault();
var framex = document.getElementById('iframe');
framex.setAttribute("src", "local.html");
framex.style.height = (framex.contentWindow.document.body.scrollHeight + 50) + "px";
return false;
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Load">
<div id="div" style="width: 100%; height: 600px; overflow: auto;">
<iframe id="iframe" width="100%" frameBorder="0">
</iframe>
</div>
</body>
</html>
The first time you are assigning framex.style.height, the page was not loaded yet, so the document has no size (or does not even exist, which would result in an error then).
You have to wait until the page was loaded:
framex.onload = function() {
this.style.height = (this.contentWindow.document.body.scrollHeight + 50) + "px";
};
Related
Why is the following page un-printable on google chrome? JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
If you can't replicate the issue, I am using Google Chrome 55.0.2883.95 (Official Build) (64-bit), and my screen size is 1920x1080
Even more interesting, it still can't print when you have display: none set. JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1" style="display: none"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
Update
The f.style.height is not necessary, the main issue is the iframe src change (a widget needs a size parameter in its location)
It's something to do with your resize handler. If you remove that code, it works fine. I believe you can accomplish what you're looking for in a CSS media query instead:
<iframe id="f" src="https://placehold.it/350x1500?q=1"></iframe>
#media print {
#f { height: 2000px }
}
https://jsfiddle.net/7x9sdf79/1/
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
So I would like to know if its possible to redirect and open a users tab to the source url's page that the iframe tag is using when they click anywhere inside of the iframe. So instead of them being able to browse the iframe I would like it to automatically open the new tab with the src's url in it.
Here is the code I am working with currently.
<!-- CSS -->
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
body {
color: purple;
background-color: #663300 }
</style>
<script>
function virtualSubmit(form){
var text = form.searchtext.value;
var targets = document.getElementsByTagName('iframe'),
items = targets.length;
for(var i = 0; i<items; i++){
var target = targets[i],
url = target.getAttribute('data-url');
target.src = url + text;
}
return false;
}
</script>
<body>
<!--The Search bar as well-->
<form onsubmit="return virtualSubmit(this)";>
<input name="searchtext" type="text" />
<input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>
<iframe src="http://www.google.com/custom"
data-url="http://www.google.com/custom?q="
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
<iframe src="http://en.wikipedia.org/wiki"
data-url="http://en.wikipedia.org/wiki/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
<iframe src="http://m.dictionary.com/definition"
data-url="http://m.dictionary.com/definition/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
Assuming the iframe is a separate domain, you cannot modify the iframe directly. The browser will prevent it because of same-origin protections.
But, depending upon your exact layout, you can sometimes put a transparent div over the top of the iframe (using absolute positioning and z-index), set up event handlers for that div and intercept any click events that the user intended for the iframe and if your desire is to redirect the browser page to somewhere else, you can do that upon one of those clicks.
$(document).ready(function() {
$("iframe").each(function() {
var iframe = $(this);
var pos = iframe.position();
var div = document.createElement("div");
var s = div.style;
s.position = "absolute";
s.left = pos.left + "px";
s.top = pos.top + "px";
s.height = iframe.height() + "px";
s.width = iframe.width() + "px";
iframe.parent().append(div);
$(div).data("src", iframe.attr("src")).click(function() {
window.location = $(this).data("src");
});
});
});
Working demo: http://jsfiddle.net/jfriend00/EB2kh/
I removed the dynamically sizing from the iframes because that complicates the problem for the purposes of showing you the concept, but if you really wanted it to work with that, you could move/resize the divs anytime the iframes were moved/resized.
here is my code to print a pdf file. here while printing time iam getting one page only i need a solution for that
function printPdf(){
var ifr = document.getElementById("frame1");
//PDF is completely loaded. (.load() wasn't working properly with PDFs)
ifr.onreadystatechange = function () {
if (ifr.readyState == 'complete') {
ifr.contentWindow.focus();
ifr.contentWindow.print();
}
}
}
I suspect that's because the whole window gets printed (which has the current view of the iframe with the 1st page of the PDF rendered). Use <object> instead:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPrint.disabled = 0;
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
</script>
</head>
<body>
<button id="idPrint" disabled=1 onclick="PrintPdf()">Print</button>
<br>
<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"
width="300" height="400" type="application/pdf"
data="test.pdf?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">
<span>PDF plugin is not available.</span>
</object>
</body>
This code is verified with IE. Other browsers will still render the PDF, but may not print it.
[UPDATE] If you need dynamic loading and printing, the changes to the above code are minimal:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
function LoadAndPrint(url)
{
idContainer.innerHTML =
'<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"'+
'width="300" height="400" type="application/pdf"' +
'data="' + url + '?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">' +
'<span>PDF plugin is not available.</span>'+
'</object>';
}
</script>
</head>
<body>
<button id="idPrint" onclick="LoadAndPrint('http://localhost/example.pdf')">Load and Print</button>
<br>
<div id="idContainer"></div>
</body>
<iframe src="teste.pdf" id="meupdf" width="800" height="600" />
function printPdf) {
var PDF = document.getElementById("meupdf");
PDF.focus();
PDF.contentWindow.print();
}
What I am trying to accomplish is that, when you put an image on 100% it nicely scales the height accordingly. I like to catch that height and process it.
<div id="view" style="width:950px;">
<img src="1.png" />
</div>
The image is 950x500pixels. However when I ask the view $( '#view' ).height() what the height is, it returns 16pixels. Does anyone know why it does this? Why doesn't it return 500pixels as that's the size of the image.
You need image to be loaded first. Try this:
<!DOCTYPE HTML>
<html>
<style>
div { width: 950px; }
img { width: 100%; }
</style>
<body>
<div>
<img src="1.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('img').load(function() {
var height = $('div').height();
console.log(height);
});
</script>
</body>
</html>
I have test to alert the size of <Div> It's return the valid value, that return the size of image.
But from your code $( 'view' ).height() I have change to $( '#view' ).height();
Here is my code it's return correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loaded() {
var height = $( '#view' ).height();
alert(height);
}
</script>
</head>
<body onload="loaded();">
<div id="view" style="width:950px;">
<img src="Desert.jpg" />
</div>
</body>
</html>
Please do not use local image, you can use an image with URL, like "http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".
Please read jQuery API carefully:
Caveats of the load event when used with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache