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.
Related
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'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.
On IE11 printing the page below, cuts the iframe at the bottom rather than letting it expand to the next page. How can I prevent that and make it print everything?
Note: to reproduce this issue, just paste the code below into notepad and open it in IE
<html >
<head>
<style>
.myiframe{
width:100%;
height:6000px;
}
</style>
</head>
<body>
<div>
<a href="javascript:print()" ><h1>Print</h1></a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>
<div>
The rest of the page
</div>
</body>
</html>
On chrome it works fine. the content of the iframe expands and are all printed
I tried to find some workarounds to get more or less to the same result. These solutions should work fine on any browser.
Look at the solution 4. It seems to be the closest to what you want to achieve. (With working example)
Solution 1: I think I've got a solution that is not perfect, but might do the job.
Just before printing, you replace the iframe with an image of the iframe. I found this library called iframe2image : https://github.com/twolfson/iframe2image.
To catch the printing event, you can use the answer to this question: https://stackoverflow.com/a/23170458/2525304
I haven't had the chance to test it, but I think you could get something going with this.
EDIT:
Solution 2: Here is another think that could work. You could use this Html to PDF api to first convert the content of the iframe to a pdf. Then include this pdf where the iframe was (by using PDF.js for example) and print the page.
Here is another api doing this: http://www.convertapi.com/web-pdf-api
EDIT 2:
Solution 3 (working example):
I just found this website that lets you embed a Save page to PDF button that will return a pdf version of the page the user is on. You could replace the print button on your page with this button and tell the user to print the generated pdf.
Working example
The only problem is that the user is sent on another website to download the file. I think you can get a direct link to the pdf file when paying for the basic membership (5$/month).
There might be similar services offering a direct links for free that I haven't found.
EDIT 3:
Solution 4 (with working example):
I just found a website that gives a direct link to the generated PDF file of the page. More information here: http://pdf-ace.com/save-as-pdf-button/
Working example (I replaced the Print button)
I actually just had to add a max-height element and set it as max-height: 100%; which is what allowed the page to continue on.
You should have three existing style elements, two of which you already wrote.
They are:
width: 100%;
height: 6000px;
max-height: 100%;
Your body has absolute positioning, I assume. Try to create and adjust the CSS height property of the absolutely positioned element(s). Since I don't have the markup and/or CSS, I can't say what height needs to be set on which element(s). More than likely, it's going to be either 100% or auto. Possibly even a combination of both.
When I copy and pasted the code you've provided into a file, then opened it and tried to print, I did receive the same issue. However, what I described above seemed to stretch/fix it with little to no issues.
How it's written for me currently:
.myiframe {
width: 100%;
height: 6000px;
max-height: 100%;
}
<div>
<a href="javascript:print()">
<h1>Print</h1>
</a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />
<div>
The rest of the page
</div>
The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.
Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>
I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.
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)