Develop Reference

Auto Resize iframe Not Work If Iframe Loaded By OnClick

I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>

UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>

stop parent page from scrolling down to iframe

I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)

Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!

Hide everything on dom until everything is loaded

I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?

I had a similar issue with my web application.. This is what I did
Hide body in HTML
<body style="display:none">
And write this script :
$(window).bind("load", function() {
$("body").fadeIn(100);
});
OR this script
$(window).load(function () {
$("body").fadeIn(100);
}
This creates beautiful effect and shows the page ONLY after everything is fully loaded..

Perhaps you could do something like
<head>
<style>
body{
display:none;
}
</style>
</head>
<body>
flickery <div></div>s go here
</body>`
And your script
$(window).load(function(){
$(document.body).css("display","block"); //shows it when all the elements are ready for presentation
});

JavaScript Code to make external site pop-up

i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!

In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.

I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');

This should put you on the right tracks.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.

use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.

Firefox iframe scrolling issue

I have a web page that is hosted in an iframe. I can only modify this page and not the containing page.
By default, my page's scrollbar is disabled, however if my page's size is over a certain threshold, I need to be able to turn on the vertical scrollbar. The following code seems to work in all browsers but Firefox:
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function setScrollbar() {
if (getDocHeight() > 5000) {
pageBody.style.overflow = 'scroll';
}
}
here is my HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>My title</title></head>
<body id="pageBody" onload="setScrollbar();">
</body>
</html>
Firefox seems to be ignoring the style.overflow = 'scroll'. I've done a good bit of searching, and I can't seem to find a solution. Any ideas?

Replace this:
pageBody.style.overflow = 'scroll';
with this:
document.getElementById('pageBody').style.overflow = 'scroll';
When I've checked your code in FF I was getting JS error pageBody is undefined, that should solve the issue :)
Cheers
G.

style.overflow = 'auto' should work better. It makes the browser decide when to add scroll bars itself.

Unfortunately Firefox displays the scrollbars on the body of a frame based on the overflow style on the frame, not on the body. So the easiest way is to insert a 100% size borderless scrollable subframe, and load the real content in there instead.
If you don't want to do that, then you can mess around with nested DIVs like this:
<body style="margin: 0px;"> <!-- override default body margin -->
<div style="height: 100%; overflow: auto;"> <!-- The actual scrollable area -->
<div style="margin: 8px;"> <!-- to emulate default body margin -->
<!-- Content goes here -->
</div>
</div>
</body>