iframe weirdness - javascript

I have two sites that I am sort of melding together. I'm using and iframe to display content from one page in the other as if it were all one site. The caveat here is that I need the page to display as normal when viewed in an iframe and to display a warning otherwise. I cannot import the iframe page into the host page due to IIS incompatibility so that option is out. The plan works fine when I simply display the page under all circumstances, it is when I try to implement the conditional display that I run into problems. On the iframe page I have the following:
<script type="text/javascript">
window.onload = function InFrame() {
MainContent_siteIsNotFramed
if (top != self) {
//document.getElementById("siteIsFramed").style.display = "inline"
siteIsFramed.visible = "true"
}
else {
//document.getElementById("MainContent_siteIsNotFramed").style.display = "inline"
siteIsNotFramed.visible = "true"
}
init();
};
</script>
This is my attempt to get the iframe page to handle its own conditional display. The only relevant code I have in the host page is the iframe itself which, for completelness, looks like this:
</head>
<body style="margin:0; height: 100%;">
<iframe runat="server" id="signInFrame" style="border: 0; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
</body>
</html>
When the content to display/not display, the content in the iframe will display with about half height. Without, it displays at full height (desired behavior). I've tried to be as thourough as possible, if anyone needs more details, let me know.

Try "positioning" the iframe:
<iframe runat="server" id="signInFrame" style="border: 0; position:absolute; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
The problem is that and iframe with default position (position: static) can't have a "relative" height (i.e. a %), so it ignores the height:100%, and applies the "default" height of an iframe (150px in FF).

Related

Page auto scroll into bottom

I created a HTML page with several text paragraphs in it. I wanted it to automatically scroll bottom after opening the page. So I used following Javascript and it working fine. let say it is page.html
But then I needed it to display inside an iframe. Let say main page as index.html, index.html has iframe tag: <iframe src="./page.html"></iframe>
It also worked while loading inside the iframe within major browsers (chrome, firefox, IE, Opera) but not in Apple's Safari mobile browser.
I tested direct HTML page page.html with Safari mobile browser and it worked!
But after loaded same page inside an iframe in index.html it didn't work.
This is the Javascript I have used in page.html
<script language="javascript">
function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); }
setInterval(autoScrolling, 1000);
</script>
Please suggest me a code fix for Apple's Safari mobile browser
You need to use -webkit-overflow-scrolling: touch, example:
<div style="overflow: scroll !important; -webkit-overflow-scrolling: touch !important;">
<iframe ...> ... </iframe>
</div>
you have to use -webkit-overflow-srolling: touch on the parent of the iframe, and set a height for your iframe.
<style>
.parent-iframe {
-webkit-overflow-srolling: touch;
overflow-y: auto;
}
iframe {
height: 100vh
}
</style>
<div class="parent-iframe">
<iframe src="http://someurl.com ...>
</div>
Also if you have some position: fixed elements in your iframe they will not be fixed on ios safari. You can try this solution to avoid that:
https://github.com/PierBover/ios-iframe-fix

Display full length of document for embed google document

How can I display the full length of an embedded google document without the scroll bar on the iframe?
<html>
<style>
body { margin: 0; padding: 0; o}
iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>
<script>
$(function() {
$.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
var contents = $("iframe").contents();
contents.find("html").html(html);
setTimeout(function() {
contents.find('a[href^="http://"]').attr("target", "_blank");
contents.find('a[href^="https://"]').attr("target", "_blank");
}, 1000); // Actually not sure if timeout is required here...
});
});
</script>
</body>
</html>
The display shows maybe a page and half of text and stops.
Google docs is currently happy to serve published documents via CORS requests.
This means that you don't need an iframe to embed your documents. You can instead use an XMLHttpRequest to GET your document and put the response inside a div's innerHtml.
You don't actually even need to make a GET request to accomplish your requirement. If all you're wanting to do is display the full length of the document without having to have a scroll bar, you can use an <embed /> tag with some css.
<embed src="https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true" width="100%" style="height: -webkit-fill-available">
When simply added to an HTML page, it will set the height to the full height of the contents of the document, so the only scroll bar you'll have is the scroll bar that is on the browser to scroll down the length of the document. Does this get you what you need?

How to write div/box on other frame in HTML? [duplicate]

I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page. I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page. However, the overlay only covers one of the framesets, the center one.
The html structure is basically (I'm leaving a lot out for clarity):
...
<frameset >
<frame id="topMostFrame">
<frameset>
<frame id="leftMostframe">
<frame id="centerMostFrame">
</frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>
JQUERY
function getTheOverlay(){
$(document).ready(function() {
$("#loading-div-background").css({opacity: 0.5});
$("#loading-div-background").show();
//alert("In getOverlay!");
});
}
function remove(){
$(document).ready(function() {
$('#loading-div-background').hide();
});
}
HTML
<div id="loading-div-background" style="display:none" class="ui-widget">
<div id="loading-div" class="ui-corner-all">
<img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/>
</div>
</div>
CSS
#loading-div-background {
display:none;
position:absolute;
top:0;
left:0;
background:gray;
width:100%;
height:100%;
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
#loading-div {
width: 300px;
height: 200px;
background-color: #ffffff;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-150px;
margin-top: -100px;
}
I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8. I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.
I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay. Yes I know frames are bad, but that is what I was given to work with.
I can't get the overlay to go over the other framesets and cover the entire page. I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround. However, when I use an alert for debugging purposes, the overlay covers over the entire page.
My question is: why is using an alert making the overlay cover everything? Is there something else I could do to get the same effect, even with the framesets?
I faced this same problem and this is what I found that worked for me.
A frame is basically a window object. All the rules about windows apply to frames. A div belongs to a document which is held inside a window. Since the document can't leave its window, the div can't leave its window. You're asking for control at the level of the browser, but all you are permitted is control at the level of the document.
However, you may do a DIV over an iframe but not a frameset.
UPDATE:
Take this example my friend, It took some time for me to solve it, but really , StackOverflow has helped me a lot, so I feel that I must put this example here to help others.
This the html of page-container, it contains an iframe that will request the page-frameset that you are wanting to overlay.
<head>
<style type="text/css">
html, body#mybcontainer_body{margin:0px;padding:0px;border:none;height:100%;width:100%;}
#mybcontainer_div{position:absolute;top:0px;bottom:0px;left:0px;right:0px;}
#mybcontainer_iframe{position:absolute;top:0%;left:0%;height:100%;width:100%;}
</style>
</head>
<body id="mybcontainer_body" >
<div id="mybcontainer_dialog" style="display:none;">Some Text Here</div>
<div id="mybcontainer_div"><iframe id="mybcontainer_iframe" border="0" frameborder="0" scrolling="no" noresize="noresize" src="page-two-contain-frameset"></iframe></div>
</body>
My Regards
I ended up using show/hide over the frameset after the explaination from Cairo Solutions. That did work, but I don't believe it's possible to cover multiple framesets with one div.
This is the code I used:
$('#divName a',top.frames['leftframe'].document).show();
$('#divName a',top.frames['leftframe'].document).hide();
Then I just used the div I created as an overlay in the main frameset to work in conjunction with this and that solved the problem.

How to set the Height of the Iframe Dynamically as per the content loading in it?

This question has been posted a lot of times, i have referred them but not working for me. I have an iframe which loads another wesite in it. I want that the height of the iframe must be change dynamically as per the height of the website page loading in it. No manual height settings. How can i do that?
<iframe src="http://www.w3schools.com/" width:150;></iframe>
Could anyone please fiddle and show me? Advance thanks for help. Fiddle link below:
[link] ( http://jsfiddle.net/vineetgnair/5p0pL5zu/ )
It's not easy to do in a cross-browser safe way as it may seem. You are better off using a JavaScript library that does it for you. I have used this one with success before.
you have an error in code that is
<iframe src="http://www.w3schools.com/" width=150;></iframe>
that is colon(:) has to replace equal(=)
if you want responsiveness make the width in percentage it gives you full responsive
<iframe src="http://www.w3schools.com/" width=100%;></iframe>
first you need to full height your iframe using some css technique given in the below css section. then take the height of that iframe(full height of given url in the src iframe), pass that height to iframe..
the css:
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
/*set your width here*/
height: 100%;
border: none;
}
</style>
the body section:
<iframe src="http://www.w3schools.com" frameborder="0" width="100%" id="frameid"> </iframe>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var theHeight = $('#frameid').height();
$('#frameid').attr('height', theHeight);
console.log(theHeight);
</script>

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>

Categories

Resources