I'm trying to load a pdf from external server and now I'm getting this error in console.
XMLHttpRequest cannot load
https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://appsdata2.cloudapp.net' is therefore not
allowed access.
How to get rid of this error? I have tried a lot but nothing has worked for me till now please help me out
thanks :)
here is my code
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Learning</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.worker.js"></script>
<script>
// URL of PDF document
var url = "https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.5;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
</script>
</head>
<body>
<canvas id="the-canvas"></canvas>
</body>
</html>
Try var url = "https://cors-anywhere.herokuapp.com/https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf"
doesn't work either also
The suggested solution is the comment shall work. Please see:
// URL of PDF document
var url = "https://cors-anywhere.herokuapp.com/" +
"https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.5;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script>
<canvas id="the-canvas"></canvas>
Enabling CORS on localhost is no different from enabling on any remote server. See https://enable-cors.org/server.html
Your problem that you cannot do that for remote server, and you really need to enable CORS there instead of localhost. You question is somewhat invalid.
Related
I am getting few errors while playing video using YouTube Player Tools - Iframe API.I am getting these 6 errors in the console window of my browser
1.Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ( 'https://www.youtube.com') does not match the recipient window's origin ('http://127.0.0.1').
2.GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED
3.GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED
4.GET chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js net::ERR_FAILED
5.GET chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js net::ERR_FAILED
6.GET chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js net::ERR_FAILED
my index.php is
<html>
<head>
</head>
<body>
<div id='player'></div>
<!--iframe id="player" type="text/html" width="640" height="390"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe-->
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 2. This code loads the IFrame Player API code asynchronously.
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '500',
width: '500',
videoId: 'wbLBHYAd0kE',//videos[currentid],
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 10000);
done = true;
}
}
function stopVideo() {
alert();
player.stopVideo();
}
</script>
</body>
</html>
What I need to do to remove these errors?
1st error:
turn
tag.src = "http://www.youtube.com/iframe_api";
into
tag.src = "https://www.youtube.com/iframe_api";
for errors 2-6: This is a known bug with the official Chromecast JavaScript library. Instead of failing silently, it dumps these error messages in all non-Chrome browsers as well as Chrome browsers where the Chromecast extension isn't present.
Im trying to troubleshoot an IE9 and before compatibility issue. THis is linked to another question at Getting an Error Code: 0 in only IE for javascript file
The error is no longer an issue but now the actual rendering is an issue.
Does anyone have any ideas why this isn't rendering properly in IE. This works with no problems in ALL other browsers but not IE9 and before.
I have posted two pictures:
is the image in IE which is NOT rendering correctly
is the image in Chrome which is correct.
I can give you any code you need I'm just not sure where to start.
Thank you for your help ahead of time.
IE9 and before with rendering problem
Chrome browser without rendering problem
Here is the initial code that was causing an error Code:0. that has been resolved but the rendering issue still remains.
// when the contract holder grid loads
var ch_item_class = '.ch-grid-item';
var ch_details_class = '.details';
var ch_container_class = '.container';
var ch_min_class = 'minimized';
var ch_hide_class = 'ch_hide';
var ch_expanded_class = 'expanded';
var ch_shadow_class = 'ch_shadowbox';
var ch_processed_class = 'processed';
var ch_transition_time = 200;
var ch_grid;
jQuery(document).ready(function() {
// get reference to grid dom element
ch_grid = jQuery('.ch-grid');
// minimize all details panes
ch_grid.find(ch_details_class).hide();
items = ch_grid.find(ch_item_class);
items.addClass(ch_processed_class);
items.addClass(ch_min_class);
items.find(ch_container_class).append('<div class="' + ch_hide_class + '">close</div>');
// click callback
ch_grid.find(ch_item_class).click(function(e){
var self = jQuery(this);
container = self.find(ch_container_class);
if (self.hasClass(ch_min_class)){
// set width and height to avoid strange bahavior
var width = self.width();
var height = self.height();
self.width(width);
self.height(height);
// minimize all other detail panes
ch_minimize_all();
// show item details
self.removeClass(ch_min_class);
self.find(ch_details_class).slideDown(ch_transition_time);
container.addClass(ch_shadow_class);
container.addClass(ch_expanded_class);
// scroll browser window to this item
var item_top = self.offset().top;
var item_center = item_top + 400;
var window_height = jQuery(window).height();
var window_scrolltop = jQuery(window).scrollTop();
var scrolltop_new = item_center - window_height/2 - 32;
var scrolltop = Math.min(window_scrolltop , scrolltop_new);
scrolltop = Math.max(scrolltop, scrolltop_new - 200);
jQuery('html,body').animate({
scrollTop: scrolltop
}, 200);
} else {
self.addClass(ch_min_class);
container.removeClass(ch_shadow_class);
self.find(ch_details_class).slideUp(ch_transition_time, remove_parent_container_shadow);
}
});
});
function ch_minimize_all(){
items = ch_grid.find(ch_item_class);
items.find(ch_container_class).removeClass(ch_shadow_class);
items.find(ch_details_class).slideUp(ch_transition_time, remove_parent_container_shadow);
items.addClass(ch_min_class);
}
function remove_parent_container_shadow(){
jQuery(this).closest(ch_container_class).removeClass(ch_expanded_class);
}
So after hours of websearching, googling and overflowing i can't find the solution to my problem.
I got a linechart from Google charts. I want to convert it to PNG, save it on the server en insert it into a MySQL database.
Sounds simple, but i cant get it to work. The script from this website isnt working anymore (atleast not here) http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html -> Not working.
Second option is the old option:
$imageData = file_get_contents('http://chart.apis.google.com/chart... etc');
I cant use that because its not supported anymore and cant get some decent quality out of it.
Is there anybody here that can give a good tutorial or help for my problem?
EDIT:
I used the code from Battlehorse combined with the code from EriC.
So now i got this working to show the chart as an image in a DIV i want to save this image on the server and update the mysql to use it in the future to use it in PDF files.
When you visit the site, paste this in the console (overwriting the malfunctioning function).
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
In JS it was searching for an iframe bla bla to get the svg.
To automatically save the image, you can just let the method being invoked programmatically.
document.body.addEventListener("load", function() {
saveAsImg( document.getElementById("pie_div")); // or your ID
}, false );
For saving images serverside, this post could be helpful save a PNG image server-side
Update
Posting images to PHP (index.js)
function saveToPHP( imgdata ) {
var script = document.createElement("SCRIPT");
script.setAttribute( 'type', 'text/javascript' );
script.setAttribute( 'src', 'save.php?data=' + imgdata );
document.head.appendChild( script );
}
function save() {
var canvas = document.getElementById("canvas"), // Get your canvas
imgdata = canvas.toDataURL();
saveToPHP( imgdata );
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas"), // Get your canvas
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#FFFF00";
ctx.beginPath();
ctx.arc(100,99,50,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
drawOnCanvas(); // Test
save();
save.php
<?php
// Get the request
$data = $_GET['data'];
// Save to your DB.
?>
You can use the grChartImg library. It's a cross browser solution and supports even old versions of IE (8 and earlier).It has many features such as download image,upload to the server, show the image in a dialog etc.
For more info look at http://www.chartstoimage.eu.
i hope help you.
This is not really an answer but might be one in the future and it is nescesary if you just want the feature back. The following URL shows all the current issues and feature requests for the visualization API.
https://code.google.com/p/google-visualization-api-issues/issues/list?can=2&q=&sort=-stars+id&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars
The more stars/votes this feature request gets, the higher the chance they will take a look at it.
I have the same issue - Save Google charts as image on server. None of answers here works for me. Finally I get solution but with some bugs(working only in Chrome browser). As base I used script from here https://gist.github.com/mpetherb/7085315 I made some changes for my project. I use jquery for importing generated graph image to to my server.
This is a graph that I want to convert to image and save google graph example id="ex0"
Script for converting to image and importing to server
<script>
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
function toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
var myimg=img.src = getImgData(chartContainer);
//Here I am using jquery for importing decoded image to hidden.php on my server
$.ajax({
method: "POST",
url: "hidden.php",
data: { name: myimg } });
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
</script>
<button onclick="toImg(document.getElementById('ex0'), document.getElementById('ex0'));"
type="button" <Convert to image and upload on server></button>
// ex0 - div id of this type of google graph. If you using another type of google graph - you should change it
Don't forget include jquery to your code.
and php hidden script for receiving data from jquery method POST and saving it on server
hidden.php file
<?php
if(isset($_POST['name']))
{
$data = $_POST['name'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
file_put_contents('graph_temp.png', base64_decode($data));
I will notice again - works only in Chrome browser. Firefox also create image file on server but without any content (looks like firefox not support base64 encoded data)
I have a flash player embedded on page page.php?user=john using swfobject. The player calls the xml file content.php to get the results. I'm trying to get the user name from the url id. and fetch results based on that. I can get the username on page.php by doing $_GET['user'], but how can i pass that to content.php. Having read allot of articles online, i did the following,
I'm embedding the flash on page.php using swfobject like this
<script type="text/javascript">
var flashvars = {user:"<?php $_GET[user] ?>"};
var so = new SWFObject("<?php echo $index->CFG['site']['url'];?>preview2.swf", "sotester", "1000", "400", "8", "#000000", flashvars);
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
so.addParam("menu", "false");
so.write("flashcontent");
</script>
In my AS2 file end of the file looks like
var paramList:Object = this.root.loaderInfo.parameters;
trace(paramList["user"])
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("contentp.php?user=" + user);
So basically, i'm trying to pass $_GET['user'] from page.php to my swf file which calls content.php. Then swf would pass that value to content.php. I believe i provided you with all the information needed. Any help would be appreciated.
PS: right now as i have it, looking at console, i see Request URL:http://www.domain.com/content.php?user=undefined. So it's coming as undefined.
Embed like so with SWFObject v2.2
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function loaded( ){
var flashvars = { };
flashvars.user = "<?php $_GET[user] ?>";
var params = {};
params.menu = "false";
params.quality = "high";
params.bgcolor = "#869ca7";
params.allowFullScreen = "true";
params.scale = "noscale";
var attributes = {};
attributes.id = "myFlashObject";
attributes.name = "myFlashObject";
attributes.align = "middle";
attributes.allowFullScreen = "true";
attributes.scale = "noscale";
var tmp = "expressInstall.swf";
var version = "8.0.0";
var width = "1000";
var height = "400";
var container = "sotester"
// verify the URL is correct
var flashObj = "<?php echo $index->CFG['site']['url'];?>preview2.swf";
swfobject.embedSWF(flashObj, container, width, height, version, tmp, flashvars, params, attributes);
}
</script>
</head>
<body onLoad="loaded()">
<div id="sotester">Loading Content... put alt. content here</div>
</body>
</html>
// in actionscript 3
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var user: String = String( paramObj[user] );
trace( user );
[EDIT]
// in actionscript 2
// _level0 will have the global flashvar on it
// trace(user);
REFERENCE
There are a few ways to go about this. If you want to insert flashvars into an embedded swf, you can simply use the flashvar property on the object or embed tags:
<param name="flashvars" value="uId=<?= $_GET['user'] ?>" />
Another way to do this is to have Flash retrieve the userId itself. Because flash can call javascript, you can actually do the same thing like this:
if( ExternalInterface.available ) {
ExternalInterface.call( "function() { return window.location.href; }" );
}
This will actually return the full URL string to flash itself, wherein you can do all the substring operations you desire.
I am opening my blog page in my website. The problem is I can give a width to an iframe but the height should be dynamic so that there is no scrollbar in the iframe, and it looks like a single page...
I have tried various JavaScript code to calculate the height of the content but all of them give an access denied permission error and is of no use.
<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>
Can we use Ajax to calculate height or maybe using PHP?
To directly answer your two subquestions: No, you cannot do this with Ajax, nor can you calculate it with PHP.
What I have done in the past is use a trigger from the iframe'd page in window.onload (NOT domready, as it can take a while for images to load) to pass the page's body height to the parent.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
Then the parent.resizeIframe looks like this:
function resizeIframe(newHeight)
{
document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
Et voila, you have a robust resizer that triggers once the page is fully rendered with no nasty contentdocument vs contentWindow fiddling :)
Sure, now people will see your iframe at default height first, but this can be easily handled by hiding your iframe at first and just showing a 'loading' image. Then, when the resizeIframe function kicks in, put two extra lines in there that will hide the loading image, and show the iframe for that faux Ajax look.
Of course, this only works from the same domain, so you may want to have a proxy PHP script to embed this stuff, and once you go there, you might as well just embed your blog's RSS feed directly into your site with PHP.
You can do this with JavaScript.
document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";
Fitting IFRAME contents is kind of an easy thing to find on Google. Here's one solution:
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err) {
window.status = err.message;
}
}
</script>
This of course doesn't solve the cross-domain problem you are having... Setting document.domain might help if these sites are in the same place. I don't think there is a solution if you are iframe-ing random sites.
Here's my solution to the problem using MooTools which works in Firefox 3.6, Safari 4.0.4 and Internet Explorer 7:
var iframe_container = $('iframe_container_id');
var iframe_style = {
height: 300,
width: '100%'
};
if (!Browser.Engine.trident) {
// IE has hasLayout issues if iframe display is none, so don't use the loading class
iframe_container.addClass('loading');
iframe_style.display = 'none';
}
this.iframe = new IFrame({
frameBorder: 0,
src: "http://www.youriframeurl.com/",
styles: iframe_style,
events: {
'load': function() {
var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
var h = this.measure(function(){
return innerDoc.body.scrollHeight;
});
this.setStyles({
height: h.toInt(),
display: 'block'
});
if (!Browser.Engine.trident) {
iframe_container.removeClass('loading');
}
}
}
}).inject(iframe_container);
Style the "loading" class to show an Ajax loading graphic in the middle of the iframe container. Then for browsers other than Internet Explorer, it will display the full height IFRAME once the loading of its content is complete and remove the loading graphic.
Below is my onload event handler.
I use an IFRAME within a jQuery UI dialog. Different usages will need some adjustments.
This seems to do the trick for me (for now) in Internet Explorer 8 and Firefox 3.5.
It might need some extra tweaking, but the general idea should be clear.
function onLoadDialog(frame) {
try {
var body = frame.contentDocument.body;
var $body = $(body);
var $frame = $(frame);
var contentDiv = frame.parentNode;
var $contentDiv = $(contentDiv);
var savedShow = $contentDiv.dialog('option', 'show');
var position = $contentDiv.dialog('option', 'position');
// disable show effect to enable re-positioning (UI bug?)
$contentDiv.dialog('option', 'show', null);
// show dialog, otherwise sizing won't work
$contentDiv.dialog('open');
// Maximize frame width in order to determine minimal scrollHeight
$frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
contentDiv.offsetWidth + frame.offsetWidth);
var minScrollHeight = body.scrollHeight;
var maxWidth = body.offsetWidth;
var minWidth = 0;
// decrease frame width until scrollHeight starts to grow (wrapping)
while (Math.abs(maxWidth - minWidth) > 10) {
var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
$body.css('width', width);
if (body.scrollHeight > minScrollHeight) {
minWidth = width;
} else {
maxWidth = width;
}
}
$frame.css('width', maxWidth);
// use maximum height to avoid vertical scrollbar (if possible)
var maxHeight = $contentDiv.dialog('option', 'maxHeight')
$frame.css('height', maxHeight);
$body.css('width', '');
// correct for vertical scrollbar (if necessary)
while (body.clientWidth < maxWidth) {
$frame.css('width', maxWidth + (maxWidth - body.clientWidth));
}
var minScrollWidth = body.scrollWidth;
var minHeight = Math.min(minScrollHeight, maxHeight);
// descrease frame height until scrollWidth decreases (wrapping)
while (Math.abs(maxHeight - minHeight) > 10) {
var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
$body.css('height', height);
if (body.scrollWidth < minScrollWidth) {
minHeight = height;
} else {
maxHeight = height;
}
}
$frame.css('height', maxHeight);
$body.css('height', '');
// reset widths to 'auto' where possible
$contentDiv.css('width', 'auto');
$contentDiv.css('height', 'auto');
$contentDiv.dialog('option', 'width', 'auto');
// re-position the dialog
$contentDiv.dialog('option', 'position', position);
// hide dialog
$contentDiv.dialog('close');
// restore show effect
$contentDiv.dialog('option', 'show', savedShow);
// open using show effect
$contentDiv.dialog('open');
// remove show effect for consecutive requests
$contentDiv.dialog('option', 'show', null);
return;
}
//An error is raised if the IFrame domain != its container's domain
catch (e) {
window.status = 'Error: ' + e.number + '; ' + e.description;
alert('Error: ' + e.number + '; ' + e.description);
}
};
#SchizoDuckie's answer is very elegant and lightweight, but due to Webkit's lack of implementation for scrollHeight (see here), does not work on Webkit-based browsers (Safari, Chrome, various and sundry mobile platforms).
For this basic idea to work on Webkit along with Gecko and Trident browsers, one need only replace
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
with
<body onload='parent.resizeIframe(document.body.offsetHeight)'>
So long as everything is on the same domain, this works quite well.
I just spent the better part of 3 days wrestling with this. I'm working on an application that loads other applications into itself while maintaining a fixed header and a fixed footer. Here's what I've come up with. (I also used EasyXDM, with success, but pulled it out later to use this solution.)
Make sure to run this code AFTER the <iframe> exists in the DOM. Put it into the page that pulls in the iframe (the parent).
// get the iframe
var theFrame = $("#myIframe");
// set its height to the height of the window minus the combined height of fixed header and footer
theFrame.height(Number($(window).height()) - 80);
function resizeIframe() {
theFrame.height(Number($(window).height()) - 80);
}
// setup a resize method to fire off resizeIframe.
// use timeout to filter out unnecessary firing.
var TO = false;
$(window).resize(function() {
if (TO !== false) clearTimeout(TO);
TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds
});
The trick is to acquire all the necessary iframe events from an external script. For instance, you have a script which creates the iFrame using document.createElement; in this same script you temporarily have access to the contents of the iFrame.
var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
// Setting the content window's resize function tells us when we've changed the height of the internal document
// It also only needs to do what onload does, so just have it call onload
dFrame.contentWindow.onresize = function() { dFrame.onload() };
dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
dFrame.onload();
}
This works because dFrame stays in scope in those functions, giving you access to the external iFrame element from within the scope of the frame, allowing you to see the actual document height and expand it as necessary. This example will work in firefox but nowhere else; I could give you the workarounds, but you can figure out the rest ;)
Try this, you can change for even when you want. this example use jQuery.
$('#iframe').live('mousemove', function (event) {
var theFrame = $(this, parent.document.body);
this.height($(document.body).height() - 350);
});
Try using scrolling=no attribute on the iframe tag. Mozilla also has an overflow-x and overflow-y CSS property you may look into.
In terms of the height, you could also try height=100% on the iframe tag.