I was hoping that someone can help me, I am trying to get the URL of a page in a iframe:
<script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<button onclick="myLocation();">Location of Frame</button>
<iframe src="http://www.google.com" width="800" height="600" frameborder="0"
scrolling="auto" name="myFrame"></iframe>
This basically will give me the location of the iframe in my page, but does not give me the google.com url - it is also important to give me the url of everypage that I may open from the google results, so when I am on google.com it should give me the google.com url and if I browse to www.facebook.com it should give me the facebook url...
Any ideas welcome! Thanks
The same origin policy prevents accessing details (including the current URI) of documents on other domains.
If you want to work around this, you will either need to use something other than a web page (such as a standalone application or browser extension) or proxy all requests through your own server.
you may want to use some sort of javascript library, but i've tried this code on deviantart.com using raw javascript code:
document.getElementsByTagName('iframe')[0].src and it gave me the result i was expecting.
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>
When I go to this url : (warning: some Ad-blocker is recommended)
https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda
The web-page link loads fine, without errors.
However, when I try to load same page via iframe in my html code, an error appears:
My html code :
<html>
<head>
</head>
<body>
<iframe width="600" height="700"
src="https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda">
</iframe>
</body>
</html>
Below image: Error result within my iframe. How to fix such error?
If you're willing to design/code your own player interface then one loading option is to use a <video> tag instead of via <iframe> tag...
<video width="640" height="480" controls crossorigin="anonymous">
<source src="https://oload.stream/stream/M4pSomdJWME~1508775093~213.205.0.0~IzmpIUe0?mime=true" type="video/mp4">
</video>
I'm not going to tell you how to steal access any video by code, but some advice is:
1) You can see in the source code that a server 1508775191~213.205.0.0 is accessed for media files including subtitle VTT file). Study rest of source code. Consider why token is mentioned and why referrer is checked. What can you do pass and get same access?
2) By using your browser's Developer Tools (especially "network" and "console" tabs), you can find the related https://oload.stream/stream/ url for any future updates or alternate embeds.
PS:
"but, this tugaflix.com/Episodio?E=2310910&S2 website is using that iframe"
Look at source code of: http://tugaflix.com/Episodio?E=2310910&S2/
You will see that no iframe is mentioned or used... They are even using two different player interfaces so you cannot assume that tugaflix.com is loading this page https://oload.stream/embed/M4pSomdJWME within some iframe. They are instead accessing the MP4 video file from some server calledhttps://lemonade-fruit.fruithosted.net/
The target site has code that prevents it from being shown in an Iframe. Unfortunately you will not be able to use that url in an Iframe.
I am using google docs viewer for show my uploaded document and i want to print it, but i can't print those document using jQuery.
I want to print iframe document but it is not by my code. how to print that document??
<button id="printbtn" onclick="myFunction()">Print</button>
<iframe src="http://docs.google.com/viewer?url=<?php echo urlencode(UPLOAD_URL.$file_name); ?>&embedded=true" frameborder="0" scrolling="no" id="iframe" style="border: none;" width="800" height="470"></iframe>
<script>
function myFunction(){
window.frames["iframe"].focus();
window.frames["iframe"].print(); // NOT WORKING
}
</script>
Please help me......
I did some digging, found its not possible,
because docs.google is going to be a different domain from yours.
I tried this,
document.querySelector('iframe').contentWindow.print()
and got 'Blocked a frame with origin "http://mydomain" from accessing a cross-origin frame.'.
Lets say, even if google allowed cross domain, the print function wont work. because google docs viewer opens another window for printing.
I've reached a conclusion that google devs have smartly made this not possible.
I'm trying to display Facebook page in an simple HTML page which only contains an iframe.
Here's my HTML code:
<html>
<body>
<iframe src="http://www.facebook.com"></iframe>
</body>
</html>
I'm always getting this error in Google Chrome's console:
Refused to display 'http://www.facebook.com/' in a frame because it
set 'X-Frame-Options' to 'DENY'.
BTW, I'm having this problem also with these iframes:
<iframe src="https://mail.google.com/mail/mu/mp/any"></iframe>
<iframe src="http://m.facebook.com"></iframe>
<iframe src="http://m.youtube.com"></iframe>
<iframe src="http://m.dropbox.com"></iframe>
<iframe src="http://m.yahoo.com"></iframe>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://mail.google.com"></iframe>
<iframe src="http://www.facebook.com"></iframe>
<iframe src="http://www.youtube.com"></iframe>
<iframe src="http://www.dropbox.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>
Meanwhile, this iframe is working well !
<iframe src="http://www.google.com/custom"></iframe>
How to solve this ?
EDIT based on comments: Is there an alternative of using iframe if this is unsolvable ? Something like browser tag in XUL ? I already tried browser tag in Firefox extension and it works well, but I'm now coding a chrome extension, so I cannot depend on XUL anymore ?
Yes, you could
use server-side includes, to fetch it from the server and include it in an iframe
use a custom browser which does not recognize that header
complicated: use websockets to create your own Javascript HTTP client, fetch the page, and insert it into the DOM
For those who are interested, this cannot be done !
I embedded a web page in an iFrame like this:
<iframe id="frame" src="http://www.domain.com" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
Edit: The problem i am having is that the web page javascript is using the top property to find objects but now it is embedded in the iframe, is there a way to over ride this?
If I understand you right, you want to send data from the iFrame to the parent? If so, the error happens because Cross Site Communication is usually blocked to avoid XSS attacks. But you can keep your iframe, and use JavaScript and the window.postMessage(); function to share data.
https://developer.mozilla.org/en/DOM/window.postMessage