I want to get the page in which my iframe is loaded.
However my iframe is sometimes loaded inside an iframe which itself is loaded inside another iframe.
like this:
<html>
<body>
<iframe src="site_a">
<html>
<body>
<iframe src="mysite"></iframe>
</body>
</html>
</iframe>
</body>
</html>
If in the head of "mysite" I try window.top.location.href I get cross-origin errors.
<script>
(function(){
var url = window.top.location.href;
console.log(url);
})();
</script>
gives
Uncaught DOMException: Blocked a frame with origin "mysite" from accessing a cross-origin frame.
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
You can't.
I get cross-origin errors.
And that is why.
Your JavaScript is not allowed to monitor what people do on other websites, even if those other websites put your page in a frame.
Related
I've created a fully customizable audio player widget with the intent that people can embed it in their blog posts (such as wordpress) by including an <iframe> tag like so:
<iframe id=“my_widget” width="800px" height="100%" scrolling="no" frameborder="no" allow="autoplay" src="http://mywebsite.com/player?audio_id=xxxxxxx">
</iframe>
The widget includes a few buttons for the purpose of sharing the article to facebook, twitter, and copying the blog url to the clipboard. When I tested my widget by embedding it in a page on my website, all of the buttons worked as expected. However, when I embedded the widget in a wordpress post, clicking on the share buttons gives me this javascript error:
Uncaught DOMException: Blocked a frame with origin "http://mywebsite.com" from accessing a cross-origin frame.
at shareFacebook (http://mywebsite.com/player?audio_id=xxxxxxx:172:46)
at HTMLButtonElement.onclick (http://mywebsite.com/player?audio_id=xxxxxxx:38:123)
My logic for redirecting the user to facebook for sharing the post (in my widget code) looks like this:
<button class="share-fb-button-sm" onclick="shareFacebook();">
<script>
function shareFacebook() {
var currentURL = window.top.location.href;
window.top.location.href = "https://www.facebook.com/sharer/sharer.php?u=" + currentURL;
}
</script>
I understand that this javascript error is telling me that my attempt at redirection is being blocked by the Same-Origin Policy. But I've definitely seen other iframe widgets do what I'm trying to do. What is the proper course of action here? I can't seem to figure out how everyone else is doing this.
Thank you for the suggestion Jimmy Leahy, I didn't know about window.open(). That partly fixed my problem. After some more research I discovered document.referrer(). Accessing location.href from an iframe is blocked by the same-origin policy, but document.referrer() is not. This function will return the url that called the iframe, which ends up being the parent url. Here's how I implemented my solution.
<button class="share-fb-button-sm" onclick="shareFacebook();">
<script>
function shareFacebook() {
var currentURL = document.referrer;
window.open("https://www.facebook.com/sharer/sharer.php?u=" + currentURL);
}
</script>
I've got a Chrome Extension that loads an iframe with some buttons whose functionality I want to control with a script, which I inject into that iframe. However, I can't access elements using document.getElementById(), and printing the document.body to the console says "null". Here's a minimal example:
Main content script:
var iframe = document.createElement("iframe");
iframe.src = browser.extension.getURL("login_form.html");
document.body.appendChild(iframe);
iframe HTML (login_form.html):
<html>
<head>
<script src='login_form.js' type="text/javascript"> </script>
</head>
<body>
<button id="login-button">Click me</button>
</body>
</html>
JS inserted into iframe (login_form.js)
console.log(document);
console.log(document.body);
console.log(document.getElementById("login-button"));
Here, the first call to console.log, as expected, prints the iframe's DOM. However, the following two calls return "null".
Related problems I've seen:
I know there are issues with cross-domain access and iframes, but this seems to be a different case as both the iframe and the JS are under the same domain (my extension). I've also seen other questions where the solution was to execute main content script with all_frames: true, but I think this case is different to my case because it's not the content script itself that's supposed to go into the iframe.
Thanks for any help!
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.
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
So the scenario is that I send some data using postMessage() from an iframe that is not going to have an id attribute associated to it, and there will be more than one iframes on the page. The src URL of the iframe is a site that is hosted on another domain, thus I can't access parent and set widths and heights due to cross-domain policy.
On the host window, besides receiving the data from the iframe, I want to resize that iframe to 10x10. So my question is, what property from the received message event refers to the actual iframe, and how can I set the width and height?
The content of the iframe:
<html>
...
<body>
<script>
parent.postMessage(dataToSend,'*');
</script>
</body>
</html>
The content of the Host:
<html>
...
<body>
...
<script>
// The listener that retrieves the data from the iframe
function iFrameListener(event){
...
}
addEventListener(window,'message',iFrameListener);
</script>
</body>