JavaScript to get some information from inside the HTML at an arbitrary URL?

Question

Sorry, I'm don't know the right terminology to look this up by keyword...

So, as a simple newbie exercise, I tried to make a file "test.html" (just on my desktop) such that when I load it my browser and click the button that appears on the page, the article count from Wikipedia's main page will appear on the page under the button.

Somebody told me to try using an iframe, and I came up with this:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"">

function get_count(){
    var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
    document.getElementById("put_number_here").innerHTML = articlecount;
}
    </script>

</head>

<body>

    <iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>

    <input type="button" onclick="get_count()" />
    <p id="put_number_here"><p>

</body>
</html>

It doesn't work, and when I test this in the scratchpad (using Firefox 17), I get this:

var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
@Scratchpad:10
*/

(And alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); works perfectly on http://en.wikipedia.org/wiki/Main_Page directly, so I know that's not the problem. Copying the source of the wikipedia main page to a new file "test2.html", and setting that as the src of the iframe, that also works.)

Am I just trying to do this in completely the wrong way?

I'm afraid you can't do this. Please read about [Same-origin policy](https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript) at MDN. — Teemu, Jan 10 '13 at 07:59
When you say "can't do this", you surely don't mean that it's completely impossible to achieve the desired function by *any* method at all? Like, it seems to be saying that [window.postMessage](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) could do it... — Owen_AR, Jan 10 '13 at 08:09
It *can't* be literally impossible for a script in my "test.html" page to automatically read a number from a set location in a public webpage, when a human can do it so easily manually... Can it? ~_^ — Owen_AR, Jan 10 '13 at 08:41
All cross-domain interaction requires control over both sources, otherway it is not possible. — Teemu, Jan 10 '13 at 08:45

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

You cannot access any elements inside an iFrame unless, the iFrame is referring the same domain.

for same domain calls, use this link for reference :

Calling a parent window function from an iframe

for different domain, user this link for reference :

How do I implement Cross Domain URL Access from an Iframe using Javascript? script

edited May 23 '17 at 12:27

Community

1
1

answered Jan 10 '13 at 08:11

Mehavel

585
3
16

Ryan McDonough · Answer 2 · 2013-01-10T08:41:49.203

0

You can reference the other frame by using:

window.frames["wiki_page"]

Then you can reference the element in the DOM by using:

window.frames["wiki_page"].document.getElementById ("articlecount");

So in your case you could try:

var targetFrame = window.frames["wiki_page"];

Then Access the elements using:

targetFrame.document.getElementById("IDOfSomething");

Make sure your iframe is still named wiki_page etc...

edited Jan 10 '13 at 08:41

answered Jan 10 '13 at 08:16

Ryan McDonough

9,732
3
55
76

Tried that on the test.html page in Scratchpad. like: `alert(window.frames["wiki_page"].document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML);`. It said "Exception: window.frames.wiki_page is undefined". Is that not what you meant? – Owen_AR Jan 10 '13 at 08:28
Okay, tried it with the step you just added. Scratchpad: `var targetFrame = window.frames["wiki_page"]; alert(targetFrame.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML);`. Still says "Exception: targetFrame is undefined". (Yes it definitely still has `id="wiki_page"`.) – Owen_AR Jan 10 '13 at 08:51
Want to try it in JS Fiddle so we can all have a look? – Ryan McDonough Jan 10 '13 at 08:52
Hadn't heard of JS Fiddle before. Just made an account... This work?: [http://jsfiddle.net/Owen_R/JjtGF/1/](http://jsfiddle.net/Owen_R/JjtGF/1/) (Obviously I just copy-pasted in the contents of the version of the test.html file that I modified to try the method you described; Haven't split up the js and the html...) – Owen_AR Jan 10 '13 at 09:01

JavaScript to get some information from inside the HTML at an arbitrary URL?

2 Answers2