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.
Related
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 am trying to call a parent function from inside of an iframe to remove the container div however it seems to be failing and I am unsure why. I am wondering if it is because the iframe loads before the parent window and so the function is not yet defined.
Here is my parents html:
<div align="center" id="review-embed-container" style="position: relative;">
<iframe frameBorder="0" id="review-embed-iframe" src="http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=1&prod_name=test" scrolling="no" width="100%">
</iframe>
</div>
And the parents jQuery:
function InjectIframeReview() {
$("#review-embed-container").hide();
};
Now inside the Iframe page I have php that checks to see if reviews are placed, if there are no reviews it calls this javascript:
<script type="text/javascript">
window.parent.InjectIframeReview();
</script>
I can't seem to find out why the function is not firing correctly, you can see the full website it is loaded on here:
Websites JQuery (function is on line 387):
http://www.trampolinesshop.co.uk/acatalog/custom.js
A page that has no reviews (iframe on line 902 of source code):
http://www.trampolinesshop.co.uk/acatalog/8ft_Skyhigh_Trampoline_and_Safety_Enclosure.html
The Iframe that gets loaded (no review for product so just has javascript):
http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=3271d&prod_name=8ft%20Skyhigh%20Trampoline%20and%20Safety%20Enclosure
A page that has a review:
http://www.trampolinesshop.co.uk/acatalog/8ft_Fun_Pink_Trampoline.html
The Iframe that gets loaded (has review so does not use javascript):
http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=3269&prod_name=8ft%20Skyhigh%20Pink%20Trampoline%20and%20Safety%20Enclosure
Chrome security May be you are using chrome. If you are using chrome this problem may affect only in local server because your chrome check your domain. But when you upload it on it will work because that time your domain will same as iframe domain. So now just check it on other browsers.
This issue will solved when you upload it into live. Check this
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);
When you browse facebook and click a link on it for example (a friend profile, the home button etc) all the page get refreshed but not the chat.
How can you tell the browser to reload the page but don't reload a part of it?
You might want to check out this document. Basically, HTML5 introduced a feature (history.pushState(), history.replaceState() and window.onpopstate) that allows you to change the URL displayed in the address bar without actually reloading the page.
Here's what facebook actually seems to do:
On browsers that support it, they use history.pushState (i've tested up-to-date chrome and firefox)
On IE (which doesn't support pushState), and I'm guessing on other browsers too, they don't change the url at all - they use hash tags. There's a javascript handler on the click event which replaces the href from facebook.com/events to facebook.com/?sfrm=1#!/events/ (or similar)
Could be with AJAX behaviors or with something like :
<body>
<iframe src="content.php" id="content_frame">
<p>Browser does not support iframes.</p>
</iframe>
<iframe src="chat.php" id="chat_frame">
<p>Browser does not support iframes.</p>
</iframe>
</body>
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.