load external site into div - javascript

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.

Related

iFrame resize from dynamic content inside the frame

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!

iframe height not increasing automatically when clicking on show hide button in iframe content page

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

How to scroll iframe and parent page same time?

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

Fetch current height of iFrame and applying that height to parent div

I have an iFrame inside of a div. I need the position on the iFrame to be absolute (it's a really long story). When the position is absolute, the content lays over the content below it. How can I fetch the current height of the iFrame and set that number as the height of the parent div in order to push the other content down, creating the illusion that the iFrame content in no longer laying on top of the rest?
Have done a bunch of research and tried so many things in js. Please help and if you're feeling nice, please give me some good rep :)
Thanks.
<div <style="height:[want this to be height of iframe after loading content]">
<iframe src="mydoc.html" style="position:absolute"></iframe>
</div>
<div>Other content that is now displaying under iFrame content</div>
$(document).ready(function() {
var iframeHeight = $('iframe').height();
$('div').css('height', iframeHeight);
});
It would be trivial to do this in vanilla js if you had selectors on your elements.

Enabling browser scroll bars after window.open with scrollbars=no

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?
Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.
Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;
Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.

Categories