calculating dynamic height of webpages for iframe - javascript

this is the index.html code..
<body><iframe name="sample" src="first.html" width="100%" height="100%" frameborder="0" id="sample" /></body>
first.html code is...
<body>
<div style="width:100%; height: 1900px; background: yellow;"></div>
<br>
second
</body>
second.html code is
<body><div style="width:100%; height: 1100px; background: blue;"></div>
<br>
first</body>
Now what i want is to make the index page render the whole first.html and second.html in full-height. somehow the iframe height must adjust to the corresponding height of webpage it is holding.
How to do this?

Dealing with iframe dimensions can be a bit of a pain. This isn't exactly an answer, but hopefully it will point you in the right direction.
Are you the author (or do you have access to the author) of the iframe? If so a solution like this should work.
I'd also give this library (or one of its 58 forks) a look over for some inspiration. In my experience, the post-message API has been useful when working with iFrames, which is what the library above is build on top of.
Hope that helps!

Related

I want to show external url(like 'https://google.com') in div

I want to show external url(like 'https://google.com') in div widthout using iframe. So referenced this.
<div>
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px"
style="overflow:scroll; border:5px ridge blue">
</object>
</div>
It is working well, but when I change data attr to what I want url(ex: 'https://www.google.com'),
it is not working. The area shows nothing. (also, .load() not working)
<div>
<object type="text/html" data="https://www.google.com/" width="800px" height="600px"
style="overflow:scroll; border:5px ridge blue">
</object>
</div>
I use this.
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
I want a solution to this problem.
and if the solution is different in control through jquery, i would like to know that as well.
I have been wandering for five hours about this. Please help me.
The website you want to show probably does not allow this with the X-Frame-Options header:
Sites can use this to avoid click-jacking attacks, ...
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
This is so you cannot simply steal any website and give it a different design, for example.
If you are actually talking about Google and that wasn't just an example, you can use this: programmablesearchengine.google.com/about

Embed PDF on webpage and scroll horizontally to center it

I have added a PDF to a webpage using the embed tag. The width of the embed window is smaller than the width of the PDF. So, A horizontal scroll bar appears. However, there are wide margins on the left and the right of the PDF document itself. If user scrolls center to the PDF, the PDF's content fits perfectly.
I would like to have this scrolling happen automatically if possible.
The code is here http://shop.stelladoradus.com/product/gsm-repeater/
You must click on the specification tab to see the PDF.
For google chrome I did the following:
I used an Iframe instead of the embed
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
on the iframe page I have:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution is actually exactly what I was looking for, as the pdf is zoomed in so the margins aren't showing, and its easier to read (bigger text). I couldn't get it to work for firefox or IE, for that you can use #Infer-On solution below.
Ok I think you have only to pass some paramenters to your PDF, as specified from documentation:
You could try something like this:
zoom=scale
Sets the zoom and scroll factors, using float or integer values. For
example, a scale value of 100 indicates a zoom value of 100%.
or else
view=Fit
Set the view of the displayed page, using the keyword values defined
in the PDF language specification. For more information, see the PDF
Reference.
See the related documentation to find the parameter will better fit for you
http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100
EDIT
What i already tried:
<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf"
type="application/pdf"
width="300" height="500">
<param name="view" value="fit" />
</object>
http://jsfiddle.net/InferOn/wVaGa/23/
this works, but not in Chrome...

iframe disable scrolling on tab

I have an iframe that looks like this:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" style = 'height:100px;width:200px;' scrolling = 'no'>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
so when I press tab in the iframe, it traverses through all the links , automaticall scrolling all the way to the bottom of the site that's in the iframe. What I want to do is make the iframe so that tab only within the rectangle box where height = 100px, width = 200px and ignore everything else on the site...basically clip everything else that doesn't fit into this rectangle...
I tried setting height and width and also overflow:hidden, but that doesn't seem to do the trick.
This blocks user from being able to click on anything in the iframe but for some reason, you can still click inside and tab through :-( fiddle
<div id="IframeWrapper" style="position: relative;">
<div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: 400px; height: 200px"></div>
<iframe src="http://www.w3schools.com" style='height:200px;width:400px;' scrolling='no'>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
You can't do anything about it, but instead you can run a JS on iframe load which cam hide the html contents from your iframe which you don't want to be displayed
you can refer to these similar questions to get the idea:
Changing div in iframe using Jquery
jQuery, select element inside iframe, which is inside an iframe
And there's a similar discussion on jQuery forums here: https://forum.jquery.com/topic/changing-elements-in-an-iframe

How to make a div of iframe float on top of another div of iframe that should be the background of the page

I read many related questions but my case seems a little bit different that none of those really work for me.
What I'm trying to achieve is to have a floating radio player that play nonstop music throughout my blog. I'm using iframe to put my blog as the background of the whole page, then another iframe for the radio player that float on top the previous iframe.
I guess the reason that all methods I found couldn't work is because the property of my iframe:
<iframe src="my blog address" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
Following is what the entire page look like(I need the radio player to float on the top):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="radio_player">
<iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"></iframe>
</div>
<div id="blog_background">
<iframe src="http://swotong.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
</div>
</body>
</html>
I'm quite new to coding and posting questions here, thanks for any help.
Best Regards
try adding z-index:1 to the frame you want on top.
You can see it working here
you have to use a position property for this to work.
position attributes from css3.com

Access twitter share iframe through javascript/html

On some pages the twitter share button is not showing its full width. I have traced the problem, the iframe in which it is displayed is only set to 24px width, however i need to set it to the correct width. Problem is.. I have no access to the iframe directly since this is the code to insert it:
<div style="margin:4px 0 0 5px; float:left; position: relative;">Tweet</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div><!-- END #socialNetworking -->
<script>
Does anybody know how I can edit the iframe? The generated HTML does not show the iframe, however digging into the html inspector on chrome web dev tools, i can see it there:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1347624904492&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.dgfdg.co.uk%2F&size=m&text=Web%20Design%20Kendal%20%7C%20Website%20Design%20Cumbria%20%7C%20Graphic%20Design%20%7C%20Marketing%20%7C%20Advertising%20%7C%20Designworks%20%7C&url=http%3A%2F%2Fwww.fdfdg.co.uk%2F" class="twitter-share-button twitter-count-none" style="width: 24px; height: 20px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
Look at https://dev.twitter.com/docs/tweet-button, I think it's the "size" attribute you're looking for. It only accepts categorical values, though. I don't think you can set it to some arbitrary size.

Categories