I'm trying to hide a header inside of an iframe, but for some reason, it is not working. Can someone look at my code and help me figure out why the header is still visible? Thanks.
<iframe id="booking_iframe" src="https://bananahostels.com/booking-engine/cacao-hostel" width="100%" height="1500px" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
$('#booking_iframe').load(function() {
$('#booking_iframe').contents().find('.hostel-branding').hide();
}
Measure the height of the header using the tools provided in FF developer edition, Chrome probably has a similar function.
Namely right click > inspect element > small ruler icon in the top right.
then wrap your Iframe inside of another div which has overflow:hidden; specified in your css, Then all you need to do is on the Iframe set your Css value transform:translateX(-theHeightOftheHeader.);
Maybe a bit hacky, but since this is an external URL that would seem to be your best option.
Related
I'm trying to make an iframe that embeds on any web page where it only shows up as a button on the bottom right of a webpage and when clicked open an about 100px by 100px box that is also embeded on the web page in the bottom right corner. The issue is that every time I put the iframe on the page, the middle of the page where their was content before goes blank. Here is the code for the iframe:
<iframe src="ka.html" title="KA"
style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px"
height="100%" width="100%">
</iframe>
I've tried editing the style but I'm not sure that the style is the problem. The iframe uses an html file and js code. I could use some help in figuring out where the problem is coming from and how I can fix it. I really appreciate any help I can get.
The style is the cause, if I’ve understood your description of the problem.
The combination of position: absolute and zero for top/left/bottom/right will cause the iFrame to cover the first ancestor element that has position: relative (or the body element if there is none).
I'm developing Hybrid E-commerce app using Ionic Framework v3. I have set iframe in my app with third party url. Its working properly but i want to disable scrolling inside iframe. I have tried many things like
scrolling="no" set inside iframe
iframe { overflow: hidden } Set css
$("iframe").contents().find("#body").addClass("iframeclass") I have also use jQuery but no luck.
I can disable it manually from browser when i set overflow: hidden inside iframe > html > Body tag, but don't know how to do it with code.
Here is my code please check and suggest me proper way.
<iframe class="iframPlace" [src]="sanitizer.bypassSecurityTrustResourceUrl(browselink)" scrolling="no"></iframe>
Thank you.
if set width and height for iframe, bigger than source, scroll is hidden otherwise iframe have a scroll because an HTML iframe is used to display a full web page within in web page and it's impossible to disable scroll.
I am using the following HTML to embed HTML from an external URL into my site and it works great:
<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
<embed src="https://myapp.com/explore" width="100%" height="100%;" />
Error: Embedded data could not be displayed.
</object>
On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.
However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.
Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...
I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:
<iframe id="exploreIFrame" src="http://myapp.com/explore"
width="100%" height="100%" style="border: none;"
></iframe>
To make it span the entire window, set these styles:
<style type="text/css">
body { margin: 0; }
#exploreIFrame { position: fixed; }
</style>
It would be better to use an iframe instead of an embed.
iframe:
The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.
embed:
Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.
The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document, you can reach the parent with:
parent = window.parent.document;
For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).
Try using the max-height property in pixels, and use the overflow property to scroll...
object_classname{
max-height: 600px; //as you like
overflow-y: scroll;
}
Couldbe hardware related. If you have a button/wheel on the mouse that you are clicking when you select the scrollbar. IT sounds like a problemI experienced with amouse that had an extra button on a scroll wheel.
I am using an iframe in my application, where I am trying to display a pdf in that iframe.
If i open the application on Ipad pdf is not scrolling. so i got a thought that if i apply a total pdf height to the iframe and putting in a div and trying to apply the overflow to that div but my problem is how to get the height of document which is in iframe.
<div>
<iframe id="miscLinkFrame" src="holiday.pdf" scrolling="no" frameborder="0" height="500" width="760" allowtransparency="true"></iframe>
</div>
in simple way its not possible
may be this logic work but not sure
1st capture document's size with jscript which is called in
2nd then change iframe size with/from jscript which is captured before (in 1st step)
try it may be this work
regard
you can use following code :
$('#iframeid')[0].height="600px";
for reference please see link
Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/
As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.
It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/
If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)