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
Related
This is my first post ever. Please be considerate.
I have an iframe :
<div>
<iframe id="myIFrame" src="https://app.repree.com" width="500" height="500" title="description"></iframe>
</div>
<script src="popup.js"></script>
</body>
I would like to go through the login (working as of now) and then remove or hide some of the HTML tags (not working as of now) so that only certain key features of the website appear.
Say.. only Activities and forms tab. (View picture for reference) Page after login
Each time I try to access the html of the iFrame, a null exception is shown to me. Thus, making me unable to affect the display of the page.
If anyone has any ideas, do please tell.
What I have tried so far:
Using JQuery
iFrame alternatives (webview, etc) : these would not display anything at all!
What I expected
JQuery would remove the elements successfully.
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'm working on a private Chrome extension that injects some code into specific websites. I am successful for all except THIS 1 website (which I cant provide you with login access, sorry).
My extension doesn't detect the new(most) of the html content being loaded on the page after navigating through the site only.
For example, when I run document.documentElement.innerHTML; the return string is only the barebones of the page.
The site is using JQuery and I do have JQuery also loaded in my extension, but it still doesn't want to read any elements. The elements do show up in Developer Console but NOT on the Source Page or Frame's Source Page
I really need access to those Elements but I can't figure it out.
Any help is appreciated.
Thanks a bunch.
EDIT: Turns out nothing was working because all the new content was being loaded into an iFrame. Now I have to research iframes :(
This is what the code in the developer's tools looks like
<html>
<iframe src="..." >
#document
<html>
<div id="im trying to get">this content</div>
</html>
</iframe>
</html>
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 am having this problem for a week couldn't figureout kindly help!
1.I have a dynamic news page.
2.below the news a comments page attached with an iframe.
3.comments page is having pagenation.
when user navigate trough pages in iframe parent page should scroll to iframes top for that i have used #top in iframe links its working in all browsers except in IE8 (i didn't check in other versions of ie though), so please help me out with it.
thanks,
eeswar
In the outer page, define a scroller function:
<script type="text/javascript"> function gotop() {scroll(0,0);} </script>
Then when you define the iframe, set an onload handler (which fires each time the iframe source loads i.e. whenever you navigate to a new page in the iframe)
<iframe id="myframe" onload="try { gotop() } catch (e) {}"
src="http://yourframesource" width="100%" height="999" scrolling="auto"
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" >
</iframe>
The nice thing about this approach is it means you do not need to make any changes to the pages included in the iframe (and the iframe contents can happily be in another domain - no cross-site scripting issues).