I've been making a Javascript bookmarklet that embeds an iFrame and I cannot align the iFrame correctly
I have tried each of the alignment types and different ways of positioning, with no luck
var AppendedFrame = document.createElement("iFrame");
AppendedFrame.src="https://www.google.com";
AppendedFrame.setAttribute("position", "absolute");
AppendedFrame.setAttribute("width", "400");
AppendedFrame.setAttribute("height", "225");
AppendedFrame.setAttribute("top", "2px");
AppendedFrame.setAttribute("right", "3px");
AppendedFrame.setAttribute("z-index", "2147483648");
document.body.appendChild(AppendedFrame);
The output I expected was to have an iFrame appear in the top right and stay, however the iFrame just stays in it's default spot.
Edit: Google is just an example by the way, I will be using a different website when it's done.
var AppendedFrame = document.createElement("iFrame");
AppendedFrame.src="https://www.baid.com";
AppendedFrame.setAttribute("style",'"position":"absolute";"width":"400";"height":"225";"top":"2px";"right":"3px";"z-index"："2147483648"');
document.body.appendChild(AppendedFrame);
Related
Long story short. I need to create an iframe with javascript and align it in the center of the page.
I found this nice piece of code:
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);
Does anyone have an idea how to fix the alignment to be centered? The reason for choosing an iframe to begin with is because I want the frame to be independent of the current page's CSS styles.
/Patrik
1- Get browser window size
2- Get iframe width and height
3- Substract number 2 from number 1
4- Divide rounding the resultby 2
And that way you'll have the x and y coordinates for your iframe to locate it in the center of the browser window.
I know that trying to scroll the iframe itself in not the way to go and instead i should be scrolling the div. Thing is it doesn't work. What is wrong with this code? Is it a google thing? I'm using the custom search so it shows up in the frame but I know google and frames don't like to play with each other.
HTML
<div id="googleframe"><iframe id="googleseo" src="http://www.google.com/custom?q=hey+there&btnG=Search"></iframe></div>
JS
var seoFrame = document.getElementById('googleseo');
seoFrame.src = googleSearch;
seoFrame.onload = function () {
document.getElementById('googleframe').scrollTop = 300;
}
}
It was a CSS issue. The iframe wasn't long enough to scroll. It was the same height as my div so I made it longer and it works perfectly.
This is due to the scrollTop referencing the iframe, not the body within the frame. The iframe itself doesn't have a scrollbar, it's the document within it.
Fiddle of it working http://jsfiddle.net/ebzxzgmo/
var seoFrame = document.getElementById('googleseo');
var elem = (seoFrame.contentDocument||seoFrame.contentWindow.document).documentElement;
elem.getElementsByTagName('body')[0].scrollTop = 300;
Notice that it's requesting jsfiddle. Browsers block accessing the DOM of iframes from other domains.
Reference for scrolling cross domain: Scroll a cross-domain child iframe?
I'm having a very strange occurrence when using an IFrame and jQuery.Contents.
We have a number of reports that are built in seperate pages, and a display page that uses jQuery Tabs to display a number of these pages at once.
These reports are of varying sizes based on the data and the inputs by the user, since they can vary we needed to dynamically set the height of the IFrame to be the height of the contents. To get the height of the contents I am using this following code :
var iframeHeight = $(this).contents().height();
iframeHeight += 50;
console.log(iframeHeight);
This code works fine on first load, but after the IFrame Postsback/Refreshes the iframeHeight that is logged is always 83px more than the previous height, regardless of the actual contents of the child page.
i.e. First report is 500px high,
Second report should be 300px high
but $(this).contents().height(); returns 583px.
Here is an example jsFiddle to demonstrate the problem. If you open the console and then click the JSFiddle Icon in the top left of the IFrame, you will notice that the logged height will be 83px more than the previous.
Is there anything that could explain this issue?
Am I miss-understanding how the jQuery.Contents function works?
If this will not work this way is there a better way to get the content height? (I've tried the height of the body + the height of the form object but this didn't work in IE).
Tested this in IE10 + Chrome Version 31.0.1650.57 m
Here is an implementation that seems to work (for expanding/shrinking contents..)
assuming that iframe's src is from the same domain and that there are not scripts that resize the iframe's contents once loaded
$(document).ready(function() {
$('#frameID').on('load', function () {
$('#ReportBuild').hide()
$(this).show();
var iframeHeight = $(this.contentDocument.documentElement).outerHeight(true);
$(this).css({ height: iframeHeight + 'px' });
this.contentWindow.onbeforeunload = function () {
$('.tabFrame').hide();
$('#ReportBuild').show();
}
});
});
Demo at http://jsfiddle.net/rq5S5/8/
With help I managed to finally find a solution, suggested examples worked on JSFiddle's but would not work when applied to my issue using ASP.NET controls generated on PostBack.
To handle this, on each of my Child pages I have wrapped the entire content inside a <div></div> and retrieved the height of this element.
Example :
<div id="ReportContent">
<!-- HTML Content -->
</div>
And the jQuery Code :
var iframeHeight = $(this).contents().find('#ReportContent').outerHeight(true);
This now works correctly for my problem in both IE10 and Google Chrome Version 31.0.1650.57 m
I want to show a fancybox on my page displaying an iframe with a source of another domain that has dynamic height (since within the iframe I'll go to different pages or might have some dynamic content). I have access to the other domain's code as well. So I can use postMessage to send the iframe's source's height to my page. But I can't seem to figure how to change the fancybox's height through code.
I tried setting the height of all the divs that contain the iframe, including the iframe itself:
document.getElementById('fancybox-frame').height = parseInt(height);
document.getElementById('fancybox-content').height = parseInt(height);
document.getElementById('fancybox-outer').height = parseInt(height);
document.getElementById('fancybox-wrap').height = parseInt(height);
and I know that I'm getting the height through all right since it works perfectly on a directly integrated iframe.
Anyone got any ideas?
Thanks
Edit:
I also tried $.fancybox.update() but I'm not really sure on how to implement that:
$.fancybox({
'height': height
});
$.fancybox.update();
Have you tried the built in $.fancybox.update() method? The the documentation suggests (under API Methods) that this method should provide the functionality you're looking for.
Found it, you have to change following attributes
document.getElementById('fancybox-content').style.height = parseInt(height) + 'px';
document.getElementById('fancybox-frame').height = parseInt(height);
I have a page that loads another page(url) onto it. The problem is that the iframe page does not fit well in the outer page. How can I reduce the size of the iframe page having the content of the iframe page intact? I do not wish to have scroll bars.
Unfortunately you can't really scale an iframe so that its contents change their size. To the browser, the iframe is a window onto another rendering context which has its own layout according to its own CSS. You are at the mercy of how the content inside the iframe is laid out.
If the iframe URL is from a different site and you can't modify it, then you can't really do anything.
If you can modify the page that's displayed within the iframe, well I'd assume you wouldn't be asking.
See the answer here ( How can I scale the content of an iframe? ). I'm using it and it works on FF, Chrome a little flakey.
You could try expanding the width/height of the iframe and checking the clientWidth vs iframe width. If they're equal, there's no scrollbar, otherwise there is.
Use a midpoint approach for efficiency. In sudo-code:
dx = iframe.width;
while (dx > 1) {
previous = iframe.width
if( iframe.width - iframe.clientWidth > 0 ) {
iframe.width += dx*2;
} else {
iframe.width -= dx/2;
}
dx = Math.abs(previous-iframe.width)
}