I have an iframe on a site that I'm building. Problem is, one of the pages I display inside the frame has some dynamic content (that expands and decreases in height when clicked), is there a way for the iframe to resize along with its content too?
It loads the size of the static page but once the item on page has been clicked and expands, the iframe doesn't expand with it.
I just have it basic at the moment, here is my <head> content:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And this is my iframe:
<iframe src="index2.php" name="frame" frameborder="0" scrolling="no" onload="resizeIframe(this)" />
I don't think the thing you want to do is feasible. Not 100% at least.
You could try to detect a single click inside the iFrame, but not in a specific target.
This answer (Detect Click into Iframe using JavaScript) cover the single click inside iFrame.
Hope it helps you!
Related
I'm creating a website. I have a sidemenu bar and its menu list is from page and post of my wordpress blog. Now, everytime I select one of the menus, its content will display in one of my created templates and it will display in an Iframe.
The content of my created template have 'div' which has class of "collapse".
Everytime I trigger the collapse div, the content does not show completely unless I scroll it.
I want it to display without scrolling and increase the height of Iframe depending the size of my collapsible div.
<iframe id="iframe" src="your URL" scrolling="no" width="100%" ></iframe>
<script>
var d = window.innerHeight;
window.document.getElementById('iframe').style.height = d+'px';
</script>
i frame height is not automatically increase or decrease when clicking show hide button in i frame content page. how can i solve this issue?
<iframe class="" id="ds" seamless="" src="demo.aspx" style="width:100%; border:none; height:100%;"></iframe>
$("#ds").load(function () {
$(this).height($(this).contents().find("html").height());
});
This is a very common issue:
You need to have control of both the servers i.e. the server from which iframe is loaded and the one in which iframe is present.
You cannot set iframe height as it is a cross domain issur=e and so it does not allow change in its height (see your console whiile loadind page it will show the error)
You need to work around using post messeage: refer https://css-tricks.com/cross-domain-iframe-resizing/
play around with post message and you will be able to set height of the iframe then
Thanks
I have a page in which navbar(header) is constant while the scroll bar moves and the background moves along with the scroll bar. At the same time text inside body is hidden below the navbar. Background is common for both navbar and text. What i want to do is, i want to shift the text inside "static-container" to an iframe. Is it possible to work with the scroll bar of iframe and main page simultaneously? In the fiddle i posted there is vertical scrollbar only for text applied. Can i get it for whole page(single scroll bar)?
JSFIDDLE
//code $(document).ready(function() {
$(".content").scroll(function() {
$("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
}); });
I do not know exactly what you need, but I have a clue. If I'm correct you want to change the div static-container into an iframe. Some much for the simple part. If I'm still correct, If the content of the iframe scrolls, it should actually scroll the main page?
There a one or two ways to do this:
You need to know the content height of the page that was loaded into the iframe and adjust the iframe correspondently.
Fill up the iframe inside the content div.
Hide the scroll bar in the iframe, but detect scroll somehow. However this will be a daunting task and the road to this will be full of potholes.
I'm going to provide a solution for option 1 and 2.
first restyle your div to iframe.
//HTML
<iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">
seamless allows the iFrame to have a transparent background, flows with the document.
sandbox so you can use pages from the same trusted source. Remember you can't do cross-domain calls. It will result in an access denied.
FOR OPTION 1
Second you need coding to detect when the page has completed loading.
function detectIframeCompletion()
{
var elementIframe = document.getElementById("static_container");
//Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";
}
Furthermore I really need to stress out that this solution only works with static content. When the content of the iframe's page is changed, the height of the iframe needs to be adjusted equally.
FOR OPTION 2
Please ignore all JavaScript from option 1. Just add this CSS to your CSS.
.content {
top:65px;
overflow: hidden;
bottom: 0px;
width: 100%;
position: fixed;
}
.content > iframe {
height: 100%;
width : 100%;
}
This will add only a scroll bar to the iframe, when the content of the iframe overflows.
Conclusion
Use option 1 when you need to add content below the iframe and you want just one scrollbar. Use option 2 when all the content is loaded into the iframe.
Most important lessons from this answer:
Seamless (or legacy allowtransparency) to make the iframe flow with the document
Use sandbox to enable content (from same source) to be accessed.
When defining CSS variables in HTML5 (CSS or via JavaScript) always add the unit. I.e. px.
SIDE NOTE: only HTML5 enabled browsers will be able to do this correctly. For the majors: IE9+, Firefox and Chrome.
You just need to make your iFrame Auto Resizing .
for that you can use this JQuery plugin to get dynamically resize iframes based on content height.
1. download it from here
2. Include jQuery library and jQuery iframe Auto Height on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>
3. Create a iFrame, and make scrolling=no
<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>
4. Call the plugin and then done
<script>
$('iframe.photo').iframeAutoHeight({
minHeight: 240, // Sets the iframe height to this value if the calculated value is less
heightOffset: 50 // Optionally add some buffer to the bottom
});
</script>
As found on
https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html
I have an application which will be shown inside an iframe.
<iframe src="http://localhost/xxxxx.aspx"></iframe>
The height and width of this container is 900px and 600px.
I want my app to be in full screen,
so now is it possible to change the height and width of the container iframe??
P.S The iframe is not in same project, so
$("iframe").css("height","1000px")
won't work as its a different file.
Specify the context in which the selector should be applied:
$("iframe", window.parent.document).css("height","1000px");
Here is an example with different files: http://www.css-arts.com/iframe_test/iframe_test.html
Browsers usually blocks the access to the iframes parent when the iframe content page is another domain than the parent page. If this is the case you have no chance.
How about something like this:
<iframe src="http://adobe.com" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="600px" width="900px"></iframe>
How can I load an external site onto another site? (load the entire page without scroll, borders)
I tried this but it does not load the entire page, and there are scroll/borders?)
<!DOCTYPE HTML>
<html>
<body>
<iframe src="http://www.externaldomain.com" name="iframeName" ></iframe>
</body>
</html>
EDIT: seamless, what does this do? http://www.w3schools.com/html5/tag_iframe.asp
You have to remove the borders using CSS and then expanding the iFrame to encompass your entire client site using JavaScript. In this way, no one will notice a thing.
But sometimes the host site is clever enough to avoid that by checking the window.top against window.self element.
Like #Milad said, you can set the IFRAME dimensions to fill the browser window.
<iframe id="my-iframe" src="mypage.php" border="0" frameborder="0" scrolling></iframe>
An example using jQuery:
$('#my-iframe').css('height', $(window).height());
Don't forget to reset the page's margins and paddings with CSS to avoid unwanted spaces:
* { margin: 0; padding: 0; }
Becareful if you have more elements on the same page, like a heading bar. If so, subtract the window height by the others elements heights.