I am rendering an iframe at the bottom of my page like this :
<iframe
id="yt-iframe"
title="xyz"
loading="lazy"
src=`https://www.youtube.com/embed/${videoId}?enablejsapi=1`
frameBorder="0"
allowFullScreen
allow="autoplay"
/>
Initially the iframe is not visible on page load and user has to scroll a bit to make it visible on viewport.
I get following endless errors once the page is loaded.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
The errors would stop coming if any of these happens:
with loading="lazy" --> the window is scrolled and the iframe is in the viewport.
loading="eager"
enablejsapi=0
However my requirement is that I need the loading to be "lazy" and I also need the enablejsapi=1 in order for the YoutubeIframeAPI to work (to be able to do things on state change of the player).
Would be great if anyone can suggest a fix with proper reasoning.
I would recommend you to check the following docs
Try adding an origin parameter to your embed URL
https://developers.google.com/youtube/player_parameters#origin
Instead of directly constructing the Iframe by yourself, consider using iframe API from youtube
https://developers.google.com/youtube/iframe_api_reference
Related
Current activity frame is id='1'
<iframe src="" frameborder="0",id='1'>
<iframe src="" frameborder="0",id='2'>
<div id="pwd">ddd</div>
</iframe>
</iframe>
The thing I'm trying to do here is I want to select first iframe inside second iframe, I this is the code I started with, which is not working!
$($x("//div[#id='2']"), window.frames[1])
Couldn't find the right answer, it would be great if anyone directs me to the answer or just hint me what should I do to fix it.
Thank you.
Most browsers will prevent crossing the IFrame boundary in the way you described, as it's considered a security issue. The only exception, as #Teemu mentioned, is when the frames are served from exactly the same domain, port etc. - in which case the browser will relax the restrictions
I'm embedding an iFrame to an external payment-provider, after the user completes their step the user gets redirected to my domain.
I'm now trying to redirect the parent page to another page located on my domain like so:
iFrame embedded on mydomain.com
<iframe src="example.com/payment" sandbox="allow-top-navigation allow-forms allow-scripts"></iframe>
Code to redirect the parent page
window.top.location.href = "mydomain.com";
On Safari in iOS I'm now getting: SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Is this the expected behavior even though I used allow-top-navigation in my sandbox parameter?
If so, are there any existing workarounds?
I found the answer myself.
My iframe sandbox attribute was missing the: allow-same-origin Parameter
Working Example
<iframe src="example.com/payment" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>
Explanation
From what I understand the problem was the redirect of:
example.com/payment to mydomain.com this gets prevented by some browsers.
Sadly I found no clear explanation on why this particular redirect is prevented.
It seems to be related to: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
I have a iframe, where I try hide one div element (frame with facebook).
<script type="text/javascript">
function changeCSS(){
frame = document.getElementById("radar");
frame.contentWindow.document.getElementById("div_facebook").style.display='none';
}
</script>
<iframe name="radar"
onload="javascript:changeCSS()"
id="radar"
width="650"
height="450"
frameborder="0"
scrolling="no"
src="http://radar.bourky.cz/index.php?lat=49.9847&lon=16.6241&zoom=8&map=0&repeat=3&last=4&r_opa=30&l_opa=10&l_type=0&cell=0&anim=1&c1=0&c2=0&c3=0&c4=0&c5=0">
</iframe>
And here is problem from console in chrome:
index.html:85 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
at changeCSS (file:///D:/jirka/Desktop/kalend%C3%A1%C5%99/index.html:85:21)
at HTMLIFrameElement.onload (file:///D:/jirka/Desktop/kalend%C3%A1%C5%99/index.html:96:170)
I have read many instructions, but problem weren't solved.
If anyone could help I'd be very much appreciated.
The problem is you can't modify the contents of an iframe unless the domain of both the main page and the iframe are the same.
I'm guessing from what you pasted that they aren't the same, since it looks like the outer is being run locally and the iframe is from a domain (radar.bourky.cz).
You won't be able to manipulate it with JavaScript from the outside. That's a security precaution to prevent malevolent actors from doing bad things with websites. You won't be able to get around it unless you control the code both inside and outside.
I have a page with 2 iframe tags:
<iframe src="top.html" seamless="seamless" width=100% height=100% id="up" name="up" frameborder="0"></iframe>
<iframe src="main.html" seamless="seamless" width=100% height=800px id="main" frameborder="0"></iframe>
Inside main.html I have the following code:
parent.frames['up'].location.href = "top.html";
The idea is to refresh the "up" iframe.
Sometimes it's working, sometimes nothing happens, and sometimes I get an exception:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
What am I doing wrong?
Try below code:
parent.frames["up"].location.replace("top.html")
I found the problem.
The problem happens when loading the page by double clicking it. The domain of both the iframe and it's parent must be the same. When loading the file by double clicking it, they are both with the domain "null", and because (null===null) return false, an exception is raised.
To make this code work I had to run it from a web server.
I created a slideshow for a website and users can put videos from vimeo or youtube in it. It works just fine. Due to some limitations with current browsers I have the thumbnail of the video showing in the slideshow, and clicking the picture opens a lightbox with the actual video. I copied the iframe code from both the youtube and vimeo websites exactly as they have it, but my console is showing errors for every iframe on the page. This is an example iframe element on my page:
<iframe
class="hide_me"
src="http://player.vimeo.com/video/7339803"
width="100%"
height="100%"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen="">
</iframe>
And this is the error I'm getting in my console:
Blocked a frame with origin "http://player.vimeo.com" from accessing a frame with origin "http://my-machine-name". Protocols, domains, and ports must match.
Am I doing something wrong?
Pages can prevent themselves being loaded inside iframes on third party sites (same origin policy).
The whole rundown can be found here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Pages that allow embedding in general often have a specific URL without these restrictions, but even YouTube has added them to their current embed URL recently with the old /embed/ scheme still working. Maybe Vimeo also has a working alternative?