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/
Related
I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its src attribute.
I created a very basic page to illustrate this...
<!DOCTYPE html>
<html> <!-- manifest="cache.manifest"-->
<head>
<title>FireFox Touch TEST</title>
<style>
body {width:100%; height:100%; background-color:green;}
div.testdiv {top:0px; left:0px; width:1in; height:1in; background-color:blue;}
</style>
</head>
<body class="body">
<div id="test" class="testdiv">Touch here</div>
<script type="text/javascript">
function tStart(event)
{
alert("Touched");
}
divid = document.getElementById("test");
divid.addEventListener('touchstart', function(){tStart(event)},false);
</script>
</body>
</html>
I seem to be either doing something fundamentally wrong or there is a problem with mobile firefox 24 on android 4.2.2
Any ideas...
Try like this:
As there is no such a variable in tStart() that calls event, the browser looks if there is an event defined in the global object. In JavaScript, the global object is called window
function tStart(event)
{
alert("Touched");
}
divid = document.getElementById("test");
divid.addEventListener('touchstart', function(){tStart(window.event)},false);
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";
};
When the developer console is open in chrome, why does onmouseover stop working?
It instead fires onclick.
Consider this simple example. It resizes the image onMouseOver when the console is closed, but only on click when the console is open
<!DOCTYPE html>
<html>
<head>
<script>
function over(x) { x.style.height="64px"; }
function out(x) { x.style.height="32px"; }
</script>
</head>
<body>
<img onmouseover="over(this)" onmouseout="out(this)" src="animage.png" />
</body>
</html>
which Google Chrome version do you have?
For me it works without any issues: http://jsfiddle.net/MXTQJ/
<script>
function over(x) { x.style.height="64px"; }
function out(x) { x.style.height="32px"; }
</script>
<img onmouseover="over(this)" onmouseout="out(this)" src="animage.png" />
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