Can't acces to the height of a div in an Iframe - javascript

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);
};

Related

how to set iframe height dynamically depending on its content

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);
}
}
}
}

jQuery DIV AutoScroll after ajax load

I have a simple chat application on a web page, i have an issue when trying to autoscroll the div only when the scroll bar is at the bottom.
I've tried this:
$("#line").load("x.php");
var d = $('#line');
d.scrollTop(d.prop("scrollHeight"));
var refreshId = setInterval(function(){
var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
$('#line').append('<p class="triangle-isosceles right"><img src="images/user-img.jpg" style="height: 30px;padding-right: 5px;"/><b>Douglas:</b> prueba<br><small>Fecha</small></p>');
console.log(isEnd);
if(isEnd){
var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
$("div#line").scrollTop(scrolle) ;
}
}, 1000);
So when doing this using the append function works great, the issue comes when instead of append i refresh the content of the div using load()
$("#line").load("x.php");
var d = $('#line');
d.scrollTop(d.prop("scrollHeight"));
var refreshId = setInterval(function(){
var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
$("#line").load('ajax/x.php');
console.log(isEnd);
if(isEnd){
var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
$("div#line").scrollTop(scrolle) ;
}
}, 1000);
This seems to break the autoscroll because the div is not autoscrolling on new messages.
Appreciate your help
Finally i achieved my goal by doing this:
var scrolled = false;
$(window).load(function() {
$("#line").load("x.php");
var d = $('#line');
d.scrollTop(d.prop("scrollHeight"));
$("#line").on('scroll', function(){
scrolled=true;
});
var refreshId = setInterval(function(){
$("#line").load('x.php');
if($('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#linea')[0].scrollHeight){
scrolled=false;
}
updateScroll();
}, 1000);
});
function updateScroll(){
if(!scrolled){
$("#linea").scrollTop($("#linea").prop("scrollHeight"));
}
}
I define a var named scrolled and set it to false (the user didn't scroll the div), after that i load the conversations on the div #line, then automatically scroll to bottom of that div to show the last messages, add a listener to the scroll event, in case the user scroll the div then i set scrolled to true so the div do not scroll automatically.
Do the refresh of the div element every second and check if the current scroll position is equal to the height of the div, if so then set the scrolled to false.
After that i run a function called updateScroll to scroll to the bottom if the scrolled var is false.

changing part of src name with jquery, keeps repeating when window resized

I have code written to find the src of all images inside a particular div and change the src name when the window is less than 900 wide. It works fine upon page refresh, but when I resize the window it continuously runs the code and I get this error
GET
file://macintosh%20hd/Users/jessicamele/Desktop/tom%20mendicino/images/boys3_small_small_small_small.jpg
net::ERR_FILE_NOT_FOUND
It just keeps adding the "_small" over and over again. Here is my code:
<div class="threePicsBoys group">
<img src="images/boys3.jpg" alt="street signs" class="boysPics1">
<img src="images/boys2.jpg" alt="city house" class="boysPics2">
<img src="images/boys1.jpg" alt="2 boys" class="boysPics1">
<img src="images/boys4.jpg" alt="philly signs" class="boysPics2">
<img src="images/boys5.jpg" alt="religious statue" class="boysPics1">
</div>
$(function() {
if (windowWidth <= 900) {
var img = $(".threePicsBoys.group").find("img").map(function() {
var src = $(this).attr("src");
var newName = src.replace(".jpg","_small.jpg");
$(this).attr("src",newName);
});
}
});
}
I could really use some help.
This script will check if the window is so thin that it has to change the src, but will also revert the changes when it have become wider than 900.
I slightly changed the mechanics to make it work. windowWidth, for example, wasn't a declared variable, and the rest didn't seem to do that much either.
var thinWindow = false;
$(window).on('load resize', function(){
if($(window).width() <= 900){
if(!thinWindow){
$('.threePicsBoys.group img').each(function(){
var src = $(this).attr("src");
var newSrc = src.replace(".jpg","_small.jpg");
$(this).attr("src", newSrc);
})
thinWindow = true
}
}else{
if(thinWindow){
$('.threePicsBoys.group img').each(function(){
var src = $(this).attr("src");
var newSrc = src.replace("_small.jpg",".jpg");
$(this).attr("src", newSrc);
})
thinWindow = false
}
}
})
Hope this helps
This code will loop forever when window is less than 900 width. If you wish to you only run on window change width you must add the correct event binding
$(window).resize(function() {
if (windowWidth <= 900)
{
var img = $(".threePicsBoys.group").find("img")
var src = img.attr("src");
if (!(src.indexOf("_small.jpg") > -1))
{
var newName = src.replace(".jpg","_small.jpg");
img.attr("src",newName);
}
}
});

How to detect window resize and then change the javascript file being added to the header?

I have this jQuery to detect the screen size and then append a file to the header based on the sceen size.
var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
I have tried to use $(window).resize() with it but I have been unable to remove the file that was originally added before the resize is triggered.
I have a JSFIDDLE for you to change my code on and as you can see it will add the js file based on the screen size but I would like it to change if the screen does too.
Thanks for your time!
Here is what I use:
$(window).bind('resize', function(event) {
//Whatever you want to run here
});
Just set a variable for you window width and height and check what they are at inside of this function.
As for changing your javascript file when the screen is resized with out reloading the whole page... I don't think that is possible. A work around might be to import all the javascript files into one file and just run different functions that overwrite any changes that the last javascript function made.
This obviously uses jQuery though.
Add your code into the callback function for the resize event.
$(window).resize(function(elem){
var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
});
The callback function will be called when the window is resized. However, the event will be fired for every pixel that the window changes in size, so be prepared for that
If I understand your question correctly you want to listen to the window resize event
var onsize = function() {
var W = $(window).width();
if(W >= 500) {
test.html('/js/desktop.js');
} else if(W >= 300) {
test.html('/js/tablet.js');
} else { //if(widowWidth <= 767)
test.html('/js/mobile.js');
}
};
I added a div to display the output.
$(window).resize(onsize);
Here's the fiddle http://jsfiddle.net/devm33/aC8Ez/

Trouble with iFrame.contentDocument

Basically, im making a javascript to refresh a page and it will find the price and buy the item when it goes up for the price desired.
I got it to work without the iframe, but I need to to work in the iframe, which is the problem ive reached.
If you went to this page: [ http://m.roblox.com/items/100933289/privatesales ]
and ran this code:
alert(document.getElementsByClassName('currency-robux')[0].innerHTML);
You would get an alert for the lowest price. In the code, this doesnt work (Hence, my problem.)
Try running the code below on this page to get it to work [ http://www.roblox.com/Junk-Bot-item?id=100933289 ]
var filePath = document.URL;
var itemid = filePath.slice(((filePath.search("="))+1));
var mobileRoot = 'http://m.roblox.com/items/';
var mobileEnd = '/privatesales';
var mobileFilePath = mobileRoot+itemid+mobileEnd;
var iframe2 = '<iframe id="frame" width="100%" height="1" scrolling="yes"></iframe>';
document.write(iframe2);
var iframe = parent.document.getElementById("frame");
iframe.height = 300;
iframe.width = 500;
iframe.src = mobileFilePath;
var price;
var snipe = false;
var lp = Number(prompt("Snipe Price?"));
document.title = "Sniping";
function takeOutCommas(s){
var str = s;
while ((str.indexOf(",")) !== -1){
str = str.replace(",","");
}
return str;
}
function load() {
if (snipe == false) {
tgs = iframe.contentDocument.getElementsByClassName('currency-robux');
price = Number((takeOutCommas(tgs[0].innerHTML)));
alert(price);
}
}
iframe.onload = load;
You might try having both pages — the one from "m.roblox.com" and the one from "www.roblox.com" — add the following up at the top of the head:
<script>
document.domain = "roblox.com";
</script>
Code from the different domains won't be allowed to look at each others page contents, but if you set the domains to the same suffix then it should work.
If you can't get it to work by sharing the same document.domain="roblox.com" code then you can try posting messages to the iframe.
Put this inside the iframe page:
window.addEventListener('message',function(e) {
});
In the parent page execute this to pass a message (can be a string or object, anything really) to the iframe:
document.getElementById("frame").contentWindow.postMessage({ "json_example": true }, "*");
Put this in the parent to listen for the message:
window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}
From inside the iframe posting a message back out:
window.parent.postMessage('Hello Parent Page','*');

Categories