Javascript: Can't access iframe document - javascript

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.

Related

iframe contentWindow not working

<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

How to overcome same-origin-policy from iframe?

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.

Javascript message within iframe

I have this error while running a html file in Chrome:
iframe Unsafe JavaScript attempt to access frame with URL http‍://my_server.com/param from frame with URL http‍://another_server/example.html. Domains, protocols and ports must match.
Is there a way so I can run the Javascript in different server?
You need to change the hash not the url itself. There are many similar questions in stackoverflow regarding this issue. You can try check this out.

crossdomain iframe handling

Hi I have a question about iframes and crossdomains.
The answers I found left me just confused. Some say it's possible, others say it's not possible. So I hope that someone here will give me the answer I've been looking for. so my question goes like this:
for example I have the website:
www.apple.com and I load an iframe with a new url: www.banana.com. In www.banana.com I have 2 comboboxes, When I change the value of the first, the second would be changed. But when I change the value I get a permission denied.
I don't have to copy the value to www.apple.com, so it stays in www.banana.com. What did work was when I opened the frame in a new tab. So my question is: is it a cross domain issue and is there a way to let the comboboxes work?
I work with this line in www.banana.com :
if (window.parent.vulin){
var docPrefix = window.parent.vulin;
}else{
var docPrefix = window.parent;
}
and it's the parent.vulin that has the permission problem.
Since you have some amount of control over both domains, you can get around the cross-domain policy using "Cross-Origin Resource Sharing," or CORS.
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
The technique involves having the server of the target window send the Access-Control-Allow-Origin HTTP header, and modifying the JavaScript code in the other window slightly to appease IE.

Javascript get element from opened window

I need to open a new window and return an element contained in it.
Say we have page A and page B, I want:
open B from A
get the element interested in B
return that element to A
I tried to do so in this manner, but it doesn't work:
var newwindow = window.open("http://www.example.com");
var elem = newwindow.document.getElementById('my-id').value;
Where am I wrong? Has anyone some advice to me?
Since you are using an absolute URI, I'm going to assume that you are trying to grab data from a different website. You'll therefore be blocked by the same origin policy.
If that isn't the case, then you're probably hitting a race condition by trying to read the content of the document before it has finished loading.
It would be a lot easier to help if you provided the error messages that your browser is almost certainly logging to its JS console.
If the new window has the same protocol, domain and port, your code should work. If it's on another domain, you can't do this for security reasons.
If you control both pages, you could use window.postMessage.

Categories