I'm making a website that has another website embedded in an object (a small box in my page). I'm looking for as solution that will allow me to hide this object when the webpage in the embedded object changes (i.e. the user clicks a link on that website)
The code I have below will only shows will create the embedded object but everything is static (i.e. the "src" will not change as the URL changes in the object).
<object data=http://www.website.com width="600" height="400"> <embed id="test" src=http://www.website.com width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>
Is there a way to look at the current URL of that object?
I've been thinking about using something similar to location.href but I'm not sure how to implement this.
Thanks
Sorry, due to browser policy, you can not do that, you can only get iframe url if it open a page within your domain. For more information you can search "get iframe url" within stackoverflow
If your site is in the same domain, you think you can do like this
var url = http://www.website.com";
function checkChange(){
if (document.getElementBydId('test').src != url){
alert('page change');
}
}
setInterval(checkChange, 1000);
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 have an Iframe and I want a javascript function to run, If the iframe changes location with a window.location / window.open
I tried this, but its not working :/
<iframe src="http://www.example.com/" onload="myFunction()" id="iframe"> </iframe>
<p>If this iframe ^^^^ changes location on a window.location/ window.open, I want the alert to go off</p>
<script>
function myFunction() {
alert(document.getElementById('iframe').src)
}
</script>
function myFunction() {
alert(document.getElementById('iframe').src)
}
<iframe src="http://www.example.com/" onload="myFunction()" id="iframe"></iframe>
<p>If this iframe ^^^^ changes location on a window.location/ window.open, I want the alert to go off</p>
You can access an iframe's current URL with .documentWindow.location.href in Firefox or .contentDocument.location.href in Chrome. With .src you will always get the last programmatically changed URL, either with the src HTML attribute or via JavaScript.
Having said all that, you cannot access anything below documentWindow or contentDocument if the domain of the URL in the iframe differs from the domain of the website executing the JavaScript code.
That is for normal browsers. You can give Electron a try if you really need to do it. Basically, with electron you can build your own browser with no security restrictions. But only you will use it, not the visitors of your website, and it is not straightforward.
suppose I have an Iframe from other site in my page and there some links to other sites.
I want to do this
when a user click on a link in the iframe instead to navigate to the destination, the page navigate to URL I interest
<iframe src="......." width="100%" height="100%"
align="middle" frameborder="0" scrolling="yes"> </iframe>
if you are opening a cross-domain iframe it is not possible to alter the contents or for the sake anything on the page. In case you want to achieve a similar effect what you can do is
1) Save the page as HTML
2) Change the to the webiste.com so that everything works properly
3) Host this page locally on your server
4) now what you can do is open this page as iframe src so it become same domain iframe, and you can modify whatever you want just writing $('iframe').contents().<your code>
It seems like a manual process but you can write a PHP or .NET script to achieve the effect, thats how i had done it and it works perfectly.
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.