<script>
function getDef() {
document.getElementById("defCanvas").innerHTML=document.getElementById("invisibleDefFrame").contentWindow.document.getElementsByClassName("def-content")[0].innerText;
}
</script>
<button onclick="getDef();">Get Definition</button>
<iframe style="display:none;" id="invisibleDefFrame" src="http://dictionary.reference.com/browse/amalgamation?s=t"></iframe>
<p id="defCanvas"></p>
This is my code for a program that should return the definition of a word, but instead does nothing. What should I do to fix it? Thanks.
Because of cross-domain security, I suspect that you are not able to access the HTML of that iframe from within your own page via Javascript.
See this previous answer.
I believe that the only way to do what you are trying to do - scrape results from another website and display them on your own - is to make the request via your own web server, parse the results and present it to the user.
You can't access the iframe this way!
You will get an Uncaught SecurityError: Blocked a frame with origin
Read this detailed answer
Related
I'm just trying to pull an image from a site (not necessarily Bing but the problem is with every site it seems). Running this code it seems to have failed at the 'if' statement. This makes me think there is no document.
I've been trying to figure out why this won't work but with my limited HTML/Javascript knowledge I just can't. Can someone enlighten me please.
I wouldn't need this many variables normally but in order to figure out the problem I made this code. I've also tried window.frames[0].document with no luck.
HTML:
<iframe id="test" src="https://www.bing.com/images/search?q=test"></iframe>
<button onclick="myFunciton()">Go</button>
Javascript:
function myFunction() {
var x = document.getElementById("test");
var y = (x.contentWindow || x.contentDocument);
if (y.document){y = y.document;}
var test = y.getElementsByTagName("img")[0].src;
}
The problem is not with your if statement. For me, your code gives me back an error:
SecurityError: Blocked a frame with origin "https://www.example.com" from accessing a frame with origin "https://www.bing.com". Protocols, domains, and ports must match.
Which means that you simply cannot access an iframe with different origins, otherwise it would be a huge security issue. The only way of interacting between iframes is using window.postMessage which you can read about in another post on StackOverflow.
You should be able to access iframe content by using following:
parent.ifr.document.getElementById('<some id>');
where ifr is the name or id of iframe window.
Please, also mind the cross-domain issues.
Have an issue where an iframe with external source loads a page with errors thrown in console. What i'm looking for is a solution to grab these errors and determine what information to show based on them. There are multiple iframes loading within the page.
So, the code outside the iframe should track and collect the console info. How can I achieve this? Thanks!
Just an example I get this error in console:
Refused to display 'http://[url]/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I would like to catch this error and infrom user that the webpage could not load properly.
If you have an access to iframe's code, you can actually post messages to window.parent depending on errors and handle them on your side. Take a look at that at Mozilla's window.postMessage
I'm basically trying to display a second website, belonging to the same organization but hosted on a different domain name, in an Iframe. And I'm trying to pass in some data from the iframe to the parent frame.
Parent frame = foo.com,
Iframe = bar.com
If I try to pass in the data from the iframe via parent.setData( data ), that gives me a same-origin policy error.
So I made a wrapper around this code, hosted at foo.com/js/wrapper.js, which contains this function:
var Foo = {};
Foo.setData = function(data)
{
parent.setData(data);
}
So now my Iframe on bar.com is doing:
<script src="http://foo.com/js/wrapper.js"></script>
<script>
Foo.setData( someData );
</script>
However, even that is giving me a security error on the parent.setData line, even through wrapper.js is hosted on the parent domain.
Is there any other way to overcome this?
You are looking for postMessage, read up on that here: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Edit: sorry, didn't see all of the comments saying the same thing
Another fun way to get around this policy is to hijack the child window.location.hash, as it is also visible to both scripting engines.
I'm developing an application that is feed a URL containing a session token from an API. This URL will grant the user of the application the ability to view search results from 3rd party databases via the API.
The issue that I'm facing is that when presenting the results (The URL) in an iframe it looks very ugly due to the iframe's scroll bar. I've poked about got the usual Google results, but I'm finding I'm quite stumped as to how to expand the iframe's height to match the incoming content.
I found an example of exactly what I'd like to happen but on trying to replicate the code I'm having no luck.
The link in question ... As you can see the page loads an iframe into a basic HTML table and expands to accommodate the size of the content in the iframe.
Here's the source code for the HTML:
<html>
<body>
<table width="100%" border=1>
<tr><td>Header</td></tr>
<tr><td>Navigation</td></tr>
<tr><td>
<iframe onload="resize(this)" src="/test/phpinfo.php">
</iframe>
</td></tr>
<tr><td>footer</td></tr>
</table>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
</body>
</html>
Nothing special right? But copypasta of the code (obviously changing the src) does nothing. I feel like I'm taking crazy pills here, this should be 2 second job, but it's not working for me. This is all client side stuff, right? No voodoo magic happening on the server.
So ladies and gentlemen, what am I doing wrong, or how can I better do this? Please bear in mind that I have no ability to effect the HTML in the iframe as it is served up via an API and I can't touch it.
Thank you
EDIT : This is the reason it won't work Same Origin Policy.
you can only access the iframe contentDocument with javascript when iframe origin and the iframe src origin equal and matches each other.
otherwise the browser dont allow you to access the inner contentDocument
Blocked a frame with origin "http://example.de" from accessing
a frame with origin "http://otherorigin.example.de". Protocols,
domains, and ports must match.
your posted example page origin
http://frank.bridgewater.edu/test/iframeResize/
and iframe src origin
http://frank.bridgewater.edu/test/phpinfo.php
matches (equal origins). so here it is working and the script can access the iframe contentDocument
I am trying to integrate with the FireShot API to given a URL, grab HTML of another web page into a div then take a screenshot of it.
Some things I will need to do after getting the HTML
grab <link> & <script> from <head>
grab <body> into <div>
But 1st, it seems when I try to do a
$.get("http://google.com", function(data) { ... });
I get a 200 in firebug colored red. I think it has to do with sites not allowing you to grab their page with JS? Then is opening a window the best I can do? But how might I control the other page with jQuery or call fsapi on that page?
UPDATE
I tried to do something like below to do something when the new window is ready, but FireBug says "Permission denied to access property 'document'"
w = window.open($url.val());
setTimeout(function() { // if I dont do this, I always get about:blank, is there a better way around this?
$(w.document).ready(function() {
console.log(w.document.body);
});
}, 1000);
I believe the cross-site security setup within Javascript is basically blocking this. You'd likely have to proxy the content through your own domain.
There are a couple other options I think for break the cross-site security constraints, but I'm not sure I'd promote them.
If the "another page" locates within the same domain of your hosting page, yes, you can. Please refer to jQuery's $().load() API.
Otherwise, you're disallowed to do so by the browser's Cross-Site Security Policy. At this moment, you can choose to use iFrame instead of DIV.
Some jQuery plugins, e.g. thickbox provides ability to load pages to appropriate container automatically.
Unless I am correct, I do not believe you can AJAX a page cross domain (e.g. from domain1.com to domain2.com). To get around this, you can have a PHP "proxy" script that does the "getting" of the page and then pass it to JS.
For example, in JS you would get() http://mydomain.com/get/?domain=http://google.com and then do what you need to do!