This question already has answers here:
Cross domain iframe issue
(5 answers)
Get DOM content of cross-domain iframe [duplicate]
(5 answers)
Closed 5 years ago.
I am busy teaching myself more about web technologies my current focus is javascript and jquery but I ran into a roadblock.
I added a Iframe (one that you get from google trends) to embed into your website.
The code to get the Iframe with google supplies is :
<iframe id="myframe" scrolling="no" style="border:none;" width="250" height="413" src="https://trends.google.com/trends/hottrends/widget?pn=p1&tn=10&h=413"></iframe>
This gives you a nice control on you website :
Now My task or what I wanted to do is loop all the elements in the trend iframe and print them on screen by using java script and JQuery.
So what I did was the following.
My Php file :
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="widgettrend"></div>
</body>
<script src="js/manager.js"></script>
</html>
My manager.js is :
$(document).ready(function(){
alert($("html").html());
$.holdReady(true);
$( "#widgettrend" ).before( "<iframe id='myframe' scrolling='no' style='border:none;' width='250' height='413' src='https://trends.google.com/trends/hottrends/widget?pn=p"+localStorage['country']+"&tn=10&h=413'></iframe>" );
//init plugin
$.holdReady(false);
//other code
alert($("html").html());
});
But here's the problem that I am facing In my first alert to print the html I get :
The second alert after I have added the code :
I can see it did add it to my html but did not load it. So then after a few seconds the control is loaded and if I do a Inspect using Chrome I can see that its loaded :
I did also try putting in a delay so that the control has time to load and then try to get the html but it stills shows the html like in the second alert.
Its like after the iframe is loaded its not updating the dom?
I would like to access the data using Jquery but I cant see the elements in the code.
Is this possible to access the data after it loaded like I can see in the Inspect image? Or do I need to update or refresh the DOM somehow?
How should I go about accessing the data?
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.
Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.
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 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'm getting started with using iframes and am getting examples done from here. So far I have been able to load the webpage in an iframe. my sample code is as follows:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com"></iframe>
</body>
</html>
My question is is there a way where I can click on the hyperlinks inside the iframe and that page again loads within the iframe itself without loading as a new page?