The following iframe is designed to fit to it's content. It works in Firefox, but not in Chrome.
<iframe src="Splash.html" seamless=true width=99% height=100% scrolling=no name="Content" id="Content" onload="this.height = this.contentWindow.document.body.scrollHeight + 10;">
</iframe>
When the page is loaded in Chrome, I get the following errors:
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. Index.html:35
Uncaught TypeError: Cannot read property 'body' of undefined
Why would it think that the iframe is undefined when I specifically used the onload event? I'm rather new to web design; forgive me if the problem is obvious.
try it without the true thingy:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_iframe_seamless
Related
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
The code below works when executed from a server, but fails on my PC.
I have tried Chrome, Edge.
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Includes</title>
<body>
<h1>The Simplest Ways to Handle HTML Includes</h1>
<h3>https://www.filamentgroup.com/lab/html-includes/</h3>
<p>Load iframe, copy to <div> before, and remove iframe.
<p>If the background is gray, then removing the iframe failed.
<p>Works from server, but not from a local file.</p>
<div></div>
<iframe name="content" style="background-color: lightgrey; width:100%" src="fff.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove(); ">
</iframe>
</body>
I got the following error:
fff.html:14
Uncaught TypeError: Cannot read properties of null (reading 'body')
at HTMLIFrameElement.onload (fff.html:14:143)
With Firefox, it works.
This issue is related to CORS. Since your html document and the iframe inside it are both loaded with a file:/// schema, their origin are treated as opaque origins as explained here:
Modern browsers usually treat the origin of files loaded using the
file:/// schema as opaque origins. What this means is that if a file
includes other files from the same folder (say), they are not assumed
to come from the same origin, and may trigger CORS errors.
That happens to be the case for Chrome, also Edge which uses the Chrome Blink engine, but not for Firefox.
Due to that, the contentDocument returns null, as noted here, since in this case the iframe and its parent document are not the Same Origin. Thus, the code this.contentDocument.body triggers the error, not reaching the this.remove(), and that's why nothing works.
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.
This code is working in Dreamweaver default browser but not in chrome or firefox. It shows only blank page , without showing google.com. Don't know why! May be the problem is with iFrame. But I have to show something other page in my page. Is there any workaround??
<!DOCTYPE html>
<html>
<head>
<title>booo yeah</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var height = $(window).height();
var width = $(window).width();
$('iframe').width(width);
$('iframe').height(height);
});
</script>
</head>
<body>
<iframe src="http://www.google.com" frameBorder="0"></iframe>
</body>
</html>
Screenshot:http://goo.gl/jTpB2g
On back there is dreamweaver with left side code and right side its default browser showing the working code. In front, there is chrome in which nothing is showing
The website you are trying to display has security that prevents it from being used in iframe. for example <iframe src="http://www.w3schools.com"></iframe> works fine. The problem is not with your browser.
Open you console panel and you can see an error message says:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Google search returns an X-Frame-Options header with SAMEORIGIN, that meas this page can only be displayed in a frame on the same origin as the page itself.
See more from X-Frame-Options
Solutions:
If you have access to the site, try set X-Frame-Options to ALLOWALL or simply remove this from http response.
If you are stuck at google, try use Google Custom Search instead, replace your url with this http://www.google.com/custom, which sends 'X-Frame-Options: ALLOWALL ' which allows you to embed this site in your IFRAME.
It's probably not displaying for security reasons.
Same Origin Policy
The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin. This policy dates all the way back to Netscape Navigator 2.0.
Some websites do allow it but Google doesn't. Strange that it's ok with Dreamweaver doing it.
There are ways you can circumvent it (I can't say they'll be suitable for your problem though).
Ways to circumvent the same-origin policy
As ajtrichards said, Google has restrictions due to Same Origin Policy.
Just try another domain you will see that your code works
jsbin.com/UJeHaqe/1/edit