ifame matching with inserting page - javascript

<iframe id="payframe" src="~" width="100%" height="3000" frameborder="0" scrolling="no" onload="scroll(0, 0);"></iframe>
my current iframe code is like above. its height is set as 3000 not along the content. To fix this and match with content length, in my HTML page which will be inserted in to iframe, I wrote like this.
$(document).ready(function() {
autoResize();
});
function autoResize(){
var newheight;
var newwidth;
newheight = document.getElementById("register_apply").contentWindow.document.body.scrollHeight;
parent.document.getElementById("register_apply").height = (newheight) + "px";
}
register_apply is the id for the wrapper, which contains all content. After making iframe height 0 I tried but it doesn't work. Is there any that I have to modify?

Related

Edit iframe dynamic content

I'm trying to edit the size of dinamic content generated on external url.
There's my code:
HTML:
<div id="movie">
<iframe name="ifr" id="ifr" src="http://zeyu.ucoz.es/directvenvio.html" width="100%" height="480" frameborder="0" scrolling="no"></iframe>
</div>
In this source url, there are 2 scripts, that generate an iframe,
I'm trying to change the width and height of this line:
<script type='text/javascript'>
width=620,
height=382,
channel='zeyudirtc',
g='1';
</script>
This is what i'm trying:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ifr').ready(function(){
$('#ifr').contents().find('script').html('width=960, height=480, channel="zeyudirtc" ');
});
});
</script>
But this doesn't work.
Can help me please?
Thanks in advance.
If you have access to the iframes source, it is possible.
You will have to add Javascript Code to the iframe Content and the surrounding page.
The code you need inside the iframe Content should be like this:
First get the height, the iframe needs.
var height = getDocHeight();
var height = $("html").height();
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if(msie > 0){
height = Math.max(
document.documentElement["clientHeight"],
document.documentElement["scrollHeight"],
document.body["scrollHeight"]
);
}
Then you have to send a message to the surrounding page. Like this:
parent.postMessage(height, "DomainOfTheSurroundingPage");
That's it for the iframe.
On the other site you need to listen to the messages.
if (window.addEventListener) {
window.addEventListener ("message", receiveMessage, false);
} else {
if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage, false);
}
}
function receiveMessage(event)
{
var height = event.data;
do something();
}
Now you have the height (in px) to work with.
Wrap the iframe in a div.
Div
--- iframe
Then set the height of your wrapper div to 0 and the padding bottom to the height you submitted.
That should do the trick.
If you cannot add the code to the iframe Content however you can't edit the height and width of the iframe dynamically.
Check css "!important" value. In css this is a "high level"
#ifr {
height: 1000px!important;
}
http://jsfiddle.net/mraranturnik/4vqhLdpq/
OK, this is not a problem script or iframe but movi url. In url you have player size. If you want change player size you mast do somthing this
var playerUrl = $('#ifr').contents().find('iframe').attr('src');
Next write RegExp for url and put new src value for iframe in file :)
Your solution change only iframe size not a player size

how to show the content of other websites in my website

I am looking for a code which does a simple task. below is the task
let's say my site is http://www.url.com
I want when my user go to this site they see a box on top of the page which shows my site name and also my contact details and also a countdown timer.
below this line I want to show the exact same website of few different URL and I want to set a timer as well so that these few websites rotate and that timer on top shows how long it is until the next refresh and next website. I want only this part of the webpage to refresh and I want the top line to be still.
http://i58.tinypic.com/s6t84h.jpg
you can see what I want in the image above.
I was told that it can be done using iframe but I don't know how to do it and I also don't want scroll
I appreciate if you could help me
I found this solution and it seems to be working. I just need the countdown timer and also I want to crop out let's say 200px of top of each website and like shift it up because one page doesn't show all the content I want unless using scrolling and I don't want that.
<!DOCTYPE html>
<html>
<body>
<div align="center" style="border:4px solid red ">
<div style="color:#0000FF">
<h3>some content<color:#0000FF/h3>
<h3>some more content<color:#0000FF/h3>
</div>
</div>
<iframe id="rotator" src="http://www.zcast.ir" width="100%" height="600" scrolling="no" border="0" ></iframe>
<script>
// start when the page is loaded
window.onload = function() {
var urls = [
"http://www.zcast.ir",
"http://www.tgju.org",
"http://www.on3.ir",
"http://www.goldinfo.ir",
"http://www.zarban.ir",
];
var index = 1;
var el = document.getElementById("rotator");
setTimeout(function rotate() {
if ( index === urls.length ) {
index = 0;
}
el.src = urls[index];
index = index + 1;
// continue rotating iframes
setTimeout(rotate, 5000);
}, 5000); // 5000ms = 5s
};
</script>
</body>
</html>
Yes absolutely you can do that using iframe
1) set iFrame scrolling attribute to no:
<iframe src="/default.asp" width="200" height="200" scrolling="no">
</iframe>
read more: iFrame attr (w3Schools)
2) setTimeout for the timer: - see more
3) Reload the iframe from parent window - see more
You can use style position:fixed; and top:0; to place the div on top of your page:
<div style="position:fixed;top:0;"> some content here </div>
so thats it! :)
You can use iframe but, be sure that target website may disallow iframe embed. You can use following code;
var websites = new Array(
"http://www.hurriyet.com",
"http://www.milliyet.com",
"http://www.amazon.com"
);
var counter = 0;
var sTimeOut = setInterval(function () {
var index = counter%(websites.length);
$("#website_div").html($('<iframe src="' + websites[index] + '" width="500" height="500" border="0" scrolling="no"/>' ));
counter++;
}, 5000);
Put your websites in list, and it will rotated.
Here is a working demo: Demo

trouble with an iframe

I have been searching all over the internet, went through stackover flow like crazy and solved half my problem, i am trying to size an iframe when you click a link to load the full size of a page, i have gotten it to work in IE but in FF nothing happens it just stay the same height,
Code that work for IE
function calcHeight() {
var the_height = 0;
//find the height of the internal page
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
the_height = document.getElementById('class').contentDocument.body.offsetHeight + 140;
}
else {
the_height = document.getElementById('class').contentWindow.document.body.scrollHeight + 18;
}
document.getElementById('class').height = the_height + "px";
}
Iframe code
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto" scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe></td>
Any help would be greatly appreciated i cannot figure this one out!
This is a link to the test page you are suppose to be able to click on 'Ohio Conceal Handgun License (CHL)' and have the code show next to it and have the IFRAME expand down like it does in IE.
Thanks!
http://www.dualactiontactics.com/Update/7/Training.html
You are using id` instead of id in your iframe, first change this
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto"
scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe>
id`="class" to id="class"
and in js change statement
document.getElementById('class').height = the_height + "px";
to
document.getElementById('class').height = the_height;
or
document.getElementById('class').style.height= the_height + "px";

Get the iframe height from the javascript

I have a iframe tag embedded in the webpage similar to
<iframe id="xyz" height="900" width="800" src="www.pqr.com></iframe>
I'm trying to get the height and width of the iframe using:
function getDimensions()
{
var iframelist = document.getElementsByTagName("iframe");
for(var i=0;i<iframelist.length;i++)
{
if(iframelist[i].id == "xyz")
{
var width = iframelist[i].height;
var height = iframelist[i].width;
var src = iframelist[i].src;
}
}
}
i am getting 0 value for width and height but src is getting proper values.
I am inserting the above javascript function defination into the webpage using NPN_Evaluate() function and again calling the function using the NPN_evaluate.
Help me to fix this problem.
Can't you use something like this..
var iframelist = document.getElementById("xyz");
alert(iframelist.offsetHeight​);​
http://jsfiddle.net/dQjqR/
Or are you trying to access dimensions from within the iframe?
This seems to be working here on this demo, which browser are you testing it on?
DEMO

How to get the object of Iframe at clientside(javascript) which placed inside Table in asp.net

I have iframe inside the column of <asp:table>. I want to get the object of an iframe in javascript. I tried like this in <body> section:
<script type="text/javascript">
function resizeIframe()
{
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
height -= 20;
document.getElementById('frame').style.height = height + "px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
But I'm getting error like "object expected or null".
Your document has probably not finished loading (so, #frame does not exist yet). To fix this, make sure that the frame already exists by adding the code after the frame (or at the end of the document):
<iframe .../> ...
<script>
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>

Categories