I would like to load an ifram and then click on a button inside this iframe (the button is the on with a little umbrella on the left just above the forecats for the next 14 days)
So far this is what I was able to do, but it's not working:
<style>
#my-div {
width: 80%;
height: 1500px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -480px;
left: -100px;
width: 1280px;
height: 1400px;
}
</style>
<div id="my-div">
<iframe src="http://www.meteofrance.com/previsions-meteo-france/paris-01e-arrondissement/75001" id="my-iframe"
scrolling="no"></iframe>
</div>
<script>
var iframe = document.getElementById("my-iframe");
iframe.addEventListener("load", function () {
console.log(iframe)
var elmnt = iframe.contentWindow.document.getElementById("mf-accordion-bandeau-btn-unfold");
console.log(elmnt)
elmnt.click();
});
</script>
Accessing the contents of an iframe with JavaScript is only possible in certain cases. The origin and protocol must be the same and also there can't be any headers on the child preventing the main page to access it.
This is pure for security reasons, as otherwise, websites would just be able to load 3rd party sites and steal personal data or act as the user.
Related
I am trying to make a scenario where if someone clicks on the iframe, so it will open a new window to check the same URL on the web browser tab. But the scroll and other mouse events on the iframe will not affect it.
I tried different approaches but nothing worked
Approach 1: Tried to get the onClick event of the iframe itself, but the issue is of cross-origin persist
Approach 2: Tried to provide the onClick event to the parent element of iframe, but as pointer-events of the iframe are enabled it won't let the parent onClick to work.
Approach 3: Tried to make an overlay of anchor tag, above the iframe. It did work but it stops the iframe scroll.
Here is my code:
<div>
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
</div>
iframe {
width: 100%;
height: 100vh;
pointer-events: none;
}
a {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
Fiddle: here
Is it possible to achieve this scenario with the cross-origin URL?
Your code does not work because you have pointer-events: none; set to it. You can do like this that you click the "button overlay" and redirect the user with javascript, once it is clicked it "removes" the button overlay.
In my case I have set the background to be red just to make it clear, and I don't remove the button I just hide it. You can adjust to your use case. Also note that this script only allows for one of this iframes and buttons. If you have more the script have to be modified to loop through and add eventListeners to button and to look at its parent to add the class on the container (or if you just remove the button)
const redirectAction = document.querySelector('.js-open-url')
redirectAction.addEventListener('click', function() {
window.open(
redirectAction.dataset.href,
'_blank'
)
document.querySelector('.container').classList.add('container--is-open')
})
.container {
position: relative;
}
iframe {
width: 100%;
height: 100vh;
}
.button {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: red;
}
.container--is-open .button {
display: none;
}
<div class="container">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
<button class="button js-open-url" data-href="https://fr.wikipedia.org/wiki/Main_Page"></button>
</div>
After adding Iframe inside contentArea, I am getting two scroll bars. I wanted to hide iframe scrollbar without hiding any content of external website link. How can I do that?
I added the below snippet code and tried couple of things like scrollbar="no" but didn't work.
Help me on this and thank you in advance.
I need contentArea scrollbar. Just wanted to hide iframe scrollbar without hiding external website content.
body{margin:0;padding:0;}
.contentArea{height:100%; width:100%; position:absolute; top:0;left:0;overflow-y:scroll;}
iframe{height:100%; width:100%; position:absolute; top:0;left:0;border:0;}
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
You need to make the size of the iframe match the size of the content in the iframe. Their is no native way of doing this in the browser, and if your doing this cross-domain then you will need JS code on both the parent and in the iframe.
Here is a much longer answer that I wrote a few years ago on how to do this.
iframe Auto Adjust Height as content changes
Alternatively their is this library that will make things a lot simpler for you.
https://github.com/davidjbradshaw/iframe-resizer
Try this, you will able to hide the scroll bar of iframe but you can still scroll your page
<div style='width: 500px; height: 120px; overflow: hidden;'>
<iframe style='width: 518px; height: 120px;' src=''></iframe>
</div>
You can use overflow:hidden
.contentArea {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden; //This should hide the scrollbar for you
}
This is not entirely possible without controlling the domain where the iframe points. However this is about as close as you can get to what you're looking for and have it reliable.
body {
margin: 0;
padding: 0;
text-align: center;
}
.contentArea {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: auto;
overflow-y: scroll;
}
.flex-box {
flex-grow: 1;
flex-basis: 0;
overflow: hidden;
/* Set height as percentage of viewport */
min-height: 100%;
}
iframe {
/*
DO not adjust height of iframe here.
set the height on .flex-box
*/
width: calc(100% + 16px);
height: 100%;
margin: 0;
padding: 0;
border: none;
}
.additional-content {
padding: 15px;
background-color: #CDDC39;
}
<div class="contentArea">
<div class="additional-content">Content Before. Remove and iframe will fill this space.
</div>
<div class="flex-box">
<iframe id="myIframe" src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
<div class="additional-content">
Some content after.<br> Remove and iframe will fill this space. Remove both top and bottom additonal content and the iframe will fill entire window.
</div>
</div>
I used this idea to 'seamlessly' embed a WordPress page into a Magento2 Page, using an iframe... since I really needed the WP template.. and it works.
Added this JS
// stackoverflow.com/questions/1145850/
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
const ifrm = document.getElementById(id);
const doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.height = getDocHeight( doc ) + 2 + "px";
}
With this iframe code
<iframe id='wp-twoblock-0'
src='https://www.example.com/wp/twoblock'
onload='setIframeHeight(this.id);'
style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;'
target='_PARENT' marginwidth='0'
marginheight='0' frameborder='0' scrolling='no' ></iframe>
Principally, it works this way:
Loads the iframe content
Runs the setiframeHeight
which then adjusts the iframe height to the proper content height .. with the given CSS and voila!
No iframe content is hidden, no double scrollbars!
Hope it helps! Demo here: https://copy.pc.pl/test.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="">
<meta name="viewport" content="width=, initial-scale=">
<title></title>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body,
html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
function setIframeHeight(id) {
const ifrm = document.getElementById(id);
const doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.height = getDocHeight(doc) + 2 + "px";
}
</script>
</head>
<body>
<h1>Parent</h1>
<iframe id='wp-twoblock-0' src='otherdocument.html' onload='setIframeHeight(this.id);' style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' target='_PARENT' marginwidth='0' marginheight='0' frameborder='0' scrolling='no'></iframe>
</body>
</html>
Hide scroll bar
Unfortunately, you can't select items from an Iframe that is from a different origin unless you can specify that it is allowed in the header. There a way better answer on how to set up cross-origin header -
Edit cross-domain Iframe content Locally Only
You should not hide the Iframe's scroll bar, because that is the one that the user will want to use to scroll. Hide the content scroll bar like this.
body {
margin: 0;
padding: 0;
}
.contentArea {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
}
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.contentArea::-webkit-scrollbar {
display: none;
}
.contentArea {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
<body>
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
</body>
for comparability with other browsers read this. https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
You can hide the scroll bar with CSS
.contentArea iframe::-webkit-scrollbar {
width: 0px;
}
This should do what you need.
I want to make it so when I click on the facebook icon, a dialog opens in which you can see the feed of a certain page.
So basically I want to make a function (with jQuery) that toggles the visibility of an iframe (generated from Facebook).
This is working on my website: https://sjaeloglegeme.dk/, but on on mobile - when I tap on the Facebook icon the iframe doesn't "show itself".
I created a JSFiddle to show you my code but because of some reason it isn't even working on my pc. I don't know what I'm doing wrong...
https://jsfiddle.net/s4yf0tq1/
HTML:
<img src="https://vanineveld.github.io/sjaeloglegeme/img/fb.svg" alt="facebook logo">
<iframe id="fbDialog" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsjaeloglegeme%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
CSS:
#fb {
position: fixed;
bottom: 20px;
right: 20px;
}
#fb img {
height: 30px;
width: auto;
}
#fbDialog {
position: fixed;
bottom: 70px;
left: 30px;
display: none;
}
jQuery:
$('#fb').on('click', function() {
$('#fbDialog').toggle();
});
Did you look at this topic?
Or maybe try adding event.preventDefault() in your code like this:
$('#fb').on('click', function(e) {
e.preventDefault();
$('#fbDialog').toggle();
});
I have checked your https://sjaeloglegeme.dk/ website from my mobile. The iframe is completely working. or you could change the #fb position: absolute; to show it over the container.
I am trying to embed Facebook videos on my website. However like many before me I am struggling with sizing them.
Following the official documentation, I realized that the first way of doing it (with the js SDK) provided an easy method to have adjustable videos, but was about twice as slow as using the iframe. But of course in the latter case, only the width of the video will adjust to its container.
I tried accessing the iframe's data to fetch the video's original height and CSS to adjust its width based on code samples I found on the internet, but can't due to same origin policy.
https://codepen.io/Angc/pen/ExYGNOO
<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
<div>
<iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>
</div>
<span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>
</div>
</div>
.embed-iframe-facebook {
max-width: 300px;
}
.embed-iframe-facebook div {
position: relative;
height: 0;
padding-top: 178%;
}
.embed-iframe-facebook iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Furthermore, I can't seem to find a way to tell the iframe to "adjust its size to its content". Ideally I would want to do that, and detect its height so I can adjust its width, to create an artificial "max-height".
My question is therefore: how can I have the iframe adjust its height to the embedded video ?
It's possible to let an iFrame fill its parent div.
For example:
.container {
display: block;
height: 100vw;
}
.iframeContainer {
display: block;
width: 100%;
height: 100%;
padding: 0px;
clear: both;
}
.embed-area {
clear: both;
width: 100vw;
}
And use the following HTML markup.
<div class="root">
<div class="container">
<div class="embed-area">
<div class="iframeContainer">
<!-- Render the iFrame in this div. -->
<!-- It will now fill up the div, unless other style rules are preventing it. -->
</div>
</div>
</div>
</div>
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}