I want to set the iframe height depending on the content height, here below code is working for local links, but i want to do it on dynamically.
please help.
<iframe id="frameDemo" src="https://myvook.blogspot.com"></iframe>
<script>
$(document).ready(function() {
$( "#frameDemo" ).on('load', function() {
var mydiv = $(this).contents().find("body");
var h = mydiv.height();
$("#frameDemo").height(h);
});
});
Following up with what Rory said, it's not possible to set the iframe height before before the iframe has been loaded since you'll be pulling content from another domain.
However, it is possible to set the height of the iframe after you've downloaded the content. Here is how I've tackled it:
function noteContentIframeLoaded(iframeId) {
// See http://stackoverflow.com/a/5788723 for how to implement this function
var iframeElement = $("#" + iframeId)[0];
setTimeout(function() {
setIframeHeight(iframeElement);
}, 10);
}
function setIframeHeight(iframe) {
if (iframe) {
if (iframe.contentWindow || iframe.contentDocument) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight);
}
}
}
}
Related
Hi — I've inherited a website that has a little javascript script that isn't working properly. I didn't code it myself and am a javascript n00b, so please forgive my ignorance.
The site switches from 3-column view to 1-column view depending on window size, and there's a script to make one particular section of the site convert neatly between the two views (by setting the column heights such that they stack neatly). I've noticed that if I resize the window without refreshing, the column heights fail to adjust. How can I fix this?
Thanks!
<script type="text/javascript">
function adjust_col_heights() {
if (window.innerWidth > 991) {
var col_1_height = document.getElementById('col-1').clientHeight;
var col_2_height = document.getElementById('col-2').clientHeight;
var col_3_height = document.getElementById('col-3').clientHeight;
console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
var css_height = col_max_height + "px";
document.getElementById('col-1').style.height = css_height;
document.getElementById('col-2').style.height = css_height;
document.getElementById('col-3').style.height = css_height;
document.getElementById('poem').style.position = "absolute";
}
else {
document.getElementById('poem').style.position = "relative";
}
}
adjust_col_heights();
window.onresize = adjust_col_heights;
</script>
window.onload = function () {
resizeElements();
window.addEventListener('resize', resizeElements);
}
function resizeElements() { ... }
here is my problem:
the size of my iFrame must vary according to the size of a div in it and when I try to get the size of this div everything I try returns 0
var childiFrame = document.getElementById("myDiv");
console.log(childiFrame,"here is my iframe");
var innerDoc = childiFrame.contentWindow.document;
console.log(innerDoc,"here is the innerDoc where i have to find my div");
mdDiv =innerDoc.getElementById("md");
console.log(mdDiv,"here is my div !");// and i can see the clientHeight =245
var divHeight = mdDiv.clientHeight; // or offsetHeight or scrollHeight
console.log(divHeight,"the div height always equals 0 !");
I haven't seen anyone talk about this problem, so if anyone has any ideas, I'll take it!
Please put this script in the parent page -
<script>
window.addEventListener('message', function(e) {
var data = e.data.split('-'),
scroll_height = data[0],
iframe_id = data[1];
if(iframe_id == 'iframe1')
document.getElementById('iframe-container-1').style.height = scroll_height + 'px'; } , false);
</script>
Put this script in iframe
<script>
setInterval(function () {
window.top.postMessage(document.body.scrollHeight + '-' + 'iframe1', "*");
}, 500);
</script>
I think you need to wait for iframe to fully load first using the onload event, then try to access the mdDiv attributes like:
var childiFrame = document.getElementById("myDiv");
console.log(childiFrame, "here is my iframe");
childiFrame.onload = function() {
console.log('my iframe is loaded');
var innerDoc = childiFrame.contentDocument ? childiFrame.contentDocument : childiFrame.contentWindow.document;
console.log(innerDoc, "here is the innerDoc where i have to find my div");
mdDiv = innerDoc.getElementById("md");
console.log(mdDiv, "here is my div !");
var divHeight = mdDiv.clientHeight; // or offsetHeight or scrollHeight
console.log(divHeight);
};
in my Wordpress site I use a plugin that allows me to view external pages in an iframe that changes its height based on the height of the content.
The page I try to load in the iframe is a simple html page that calls a javascript.
This however prevents the iframe from changing its height.
Can it be solved in any way?
Thanks.
Here is the code of the html page that must be loaded into the iframe:
<body>
<script type="text/javascript" src="https://www.domain-name.com/script-name.php?param1=1¶m2=22"></script>
</body>
give div ID or Call and the CSS
height : 100vh ;
try this code on load
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe_block' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
So I have a html page. I have an iframe in it, that resizes when the content is loaded in it, but i have a sidebar(div) that I need to set height equal to new iframe height.
My javascript for iframe resize is
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}
if( ifDoc )
{
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
// ifRef.width = 1;
// ifRef.width = ifDoc.scrollWidth;
}
}
Actualy the code is not mine, Credits to Logic Ali .
You will need to have an onResize handler like such.
http://www.w3schools.com/jsref/event_onresize.asp
window.onresize=function(){
setIframeHeight( iframeId )
};
I need your help about rangy library .
How can I apply rangy within iframe selected content, i cant to understand ((
this code in my page create red bold selection with ALL iframe content, but I need to apply it to only user selection
var cssApplier;
$("#ok_button").click(function()
{
var iframe = document.getElementById("iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var range = rangy.createRange(iframeDoc);
cssApplier.applyToRange(range);
});
$("iframe#iframe_id").load(function()
{
rangy.init();
cssApplier = rangy.createCssClassApplier("boldRed", {normalize: true});
});
You need to get the selection from the iframe. Here's how:
var cssApplier;
$("#ok_button").click(function()
{
var iframe = document.getElementById("iframe_id");
var iframeWin = rangy.dom.getIframeWindow(iframe);
cssApplier.applyToSelection(iframeWin);
// In Rangy 1.3, you can pass the iframe object directly into
// applyToSelection so the previous two lines become:
// cssApplier.applyToSelection(iframe);
});
$("iframe#iframe_id").load(function()
{
rangy.init();
cssApplier = rangy.createCssClassApplier("boldRed", {normalize: true});
});