My app needs to use iframes to work with third party websites.
One of these websites, has a function that automatically sets its "overflow" to "hidden" when it detects itself being used as an iframe.
Is there a fix to this? I know in general if the iframe is not of same origin I shouldn't be able to change their css.
I would also like to know if there is a good reason to set "overflow: hidden" just because it is used as an iframe...
The app runs only on Samsung devices, using Chrome.
Any help is appreciated. Thanks!
Their is nothing legitimate that you can do to fix this. The content of an iframe is sandboxed from the parent page by the security system in the browser.
As for why they do this, I expect they have another usecase where they find it useful, but it would be better to just turn scrolling off in the iframe element, than use overflow like this.
Related
I am using the facebook Like Box API (http://developers.facebook.com/docs/reference/plugins/like-box/). I set the height in the supplied code generation boxes but it always reverts to the standard height. I try editing the code directly eg:
<div class="fb-like-box" data-href="https://www.facebook.com/me" data-width="870"
data-height="1000"
data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false"></div>
But this also does nothing to change it.
I have tried both the iframe and HTML5 versions of this to no avail.
I have also tried adding some inline CSS eg: style="height: 1000px;". Also no luck there.
Width, for whatever reason, seems fine.
Can anyone suggest a way to fix this? Thanks!
height - the height of the plugin in pixels. The default height varies
based on number of faces to display, and whether the stream is
displayed. With the stream displayed, and 10 faces the default height
is 556px. With no faces, and no stream the default height is 63px.
From your link.
The height of the element inside the IFRAME was changing as per the height value you put in the Facebook code until a few days ago. Something seems to have changed at Facebook. I have two sites that are effected. Both were displaying the like box at the height I declared until very recently.
The same thing is happening to me as well after working for the past 12+ Months. I tried recreating the code using several different options and it seams to be a code bug within the Facebook Application itself. Wondering if anyone there knows of the issue and if we can expect it to be fixed soon. My site: http://peachtreebennett.com/
Apparently, you can no longer change the height. As some have stated, in the past, changing the data-height in their provided code would change the height of the iframe as well as the content inside it. This no longer happens.
Even the generator on Facebook's dev site has a height input field, but changing it does nothing. Try it for yourself here:
https://developers.facebook.com/docs/reference/plugins/like-box/
Yes I know no one likes iframes, but here's the scenario.
I have a client who has his website that he's never going to change.
He has page that has an iframe with a 680px width and 600px height.
He currently has a website embedded in it that has a width of 950px.
What I want to know is if there is a way (I've searched all over) to automatically set the website to fit into the iframe box?
I have access to the child site but not to the parent, but my client actually knows some html/css so I can build a test link on my server and send him the code (if he needs it) to be applied on his end.
Thanks in advance.
This isn't an "automatic" way, but one thing you could do is apply some CSS to the little page. If the page you are loading doesn't change, you can apply CSS that is specific to that page which will change the elements' widths, and anything else that needs to be changed. Here is an answer on SO that describes just how to do that for iframes.
Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.
Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.
The blog post linked above says the following:
iFrames
What is it: Using iFrames in overflow:scroll elements to show things
like videos or maps What’s the symptom: If you have an iframe that is
outside of the viewport in an overflow: scroll element (especially
when using -webkit-overflow-scrolling: touch) then it will not render
as you scroll to itWhat’s the cure: no idea, please send me the
answer
Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.
This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?
Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...
I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.
I have an issue with Google Chrome: 19.0.1084.52 m when I have the Ask Toolbar installed
it breaks the website layout.
See print screen:
Is it usual behaviour that toolbars in Chrome would effect the website?
EDIT: I guess I should wrap everything inside a <div> and move the background-image from the <body> although is there a better option without adding this extra markup?
Website link
A Javascript snippet can disable ask toolbar in chrome. I hope this function spreads quickly!!
function removeAsk(){
if(document.getElementById("apn-null-toolbar") != null){
// mainMenu had a style change for its top positioning, returning it to normal
// perhaps a function can be made which iterates over every element ask has changed
document.getElementById("mainMenu").style.top = "-16px";
// Just remove the iframe and style elements
(elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
(elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
}
}
Call this method after body onload
<body onload="removeAsk()">
There is no Chrome extensions API for creating a toolbar so mentioned extension must have created it via content script. What it means is that for each page you open, CSS and JavaScript files are injected by this extension to create a DOM element within the page acting as a toolbar. Problem with this solution is that using the content script it is possible to mess up website look or even the way it works.
I ran into this exact same issue with the Ask Toolbar. I basically took out my positioning attributes and top/left/right/bottom 's and replaced with margins. Margin uses less space and it comes out cleaner.
Although i do agree, it's kind of ridiculous to accommodate for a toolbar because the end-user could have anything installed that breaks and gives your layout bugs. Even Skype extensions will break a layout just changing the phone number.
So there's not much you can do, but use margins and keep CSS to a minimum. Just my 2 cents. and if you have to use CSS then stick with margins.
I have a ‘page a’ using ‘css a’. This page has margins set in css.
I also have a ‘page b’ using ‘css b’. This page also has margins set in css, of the same size as in ‘css a’ (10px).
Is there any way I can make it so that when I am viewing ‘page a’ on its own it has margins, but when viewed in an iframe on ‘page b’ the margins don’t apply to ‘page a’. I know that’s kind of a long way of asking but the basic problem is that I am getting ‘double margins’ for the content in the iframe: the margin from ‘page a’ and then the margin from ‘page b’!
I guess one way of doing it would be to set the iframe not to be affected by ‘page a’s’ margins. Is there some way I can set ‘css a’ to exclude the iframe from the margins, that way only the margins from css b would apply and the page would still be in alignment. is that possible?
Thanks for any help
Matt
You can use Javascript to change the margins if the page is inside an iframe.
I don't know a way of specifying it from within a.css, but if you add the following to b.css:
iframe { margin:-10px; }
...it may work.
EDIT: Is the iframe with a.html the only item contained within b.html?
Do you have test files?
EDIT(2): In css, you would specify it as
iframe#head { ...; }
Also, I think you can comment on responses to your own questions. I could with mine.
Im really sorry i know everyone gets very upset with posting answers rather than comments im new to stack overflow and just learning. Have mercy! I have figured out what i was doing wrong and now i have this 'open id' thing i will try to post in the right place. I'm afraid this time though i have to post as an answer as i started this question without my open id and so still cant comment on that stuff....
OK now thats out of the way here is a 'test case' : http://cart3.jaspers-sensations.com/test/pagea.html
Page b is : http://cart3.jaspers-sensations.com/test/pageb.html
css a is : http://cart3.jaspers-sensations.com/test/stylea.css
css b is : http://cart3.jaspers-sensations.com/test/styleb.css
Having read your clarification, I don't think you can do that purely with CSS. I'm pretty sure CSS can't go across frames.
You should be able to do this using JavaScript, though, provided both documents are on the same domain.
For example, this should work on your example page. Add the following attribute to the <iframe>:
onload="window.frames[0].document.body.style.margin = 0"
That works in Firefox 3 and Opera 9, at least. But it's decidedly old-school JavaScript, and considering my browsers were being a bit fickle in which variants worked, I'm not sure how easy that would be to apply to the real site.
People more well-versed in JavaScript than me should be able to help out there.
This might help some more:
Accessing the document inside an iframe