1

I have a requirement for obtaining the content of an iframe within a web page. I found the following code which does this correctly---

<html>
<head>

</head>
<body>
<script type="text/javascript"> <!-- Function can also be loaded from an external file -->
function getContentFromIframe(iFrameName) // the function has one parameter: the iframe's ID.
{                                         // I did it this way, so you can call it for multiple iframes.

    var myIFrame = document.getElementById(iFrameName); // Creating an object of the iframe
var content = myIFrame.contentWindow.document.body.innerHTML; // Getting it's content into a variable

// Basically now, in the variable 'content' you have the content of your iframe,
// and can do anything you want with it.
alert('content: ' + content);    // here it is


// You can even choose to change it afterwards
content = 'The inside of my frame has now changed'; // create a new content
myIFrame.contentWindow.document.body.innerHTML = content; // and set it
}

</script>
<iframe id="iframe1" src="http://www.google.com/"></iframe> <!-- Instantiating the iframe -->
<br />
<a href="#" onclick="getContentFromIframe('iframe1')">Get the content</a> <!-- Calling the function -->

</body>

</html>

Now I plan to use the above code in a Google Chrome extension- basically when I click on the button for the extension then javascript code will be injected into the web page, and here I need to obtain the content of iframe named "iframe1".

I understand that in function 'getContentFromIframe' the value of iframe's id is passed as input parameter. So I changed the code to following, hoping to obtain the content of iframe--

var myIFrame = document.getElementById('iframe1'); // Creating an object of the iframe
var content = myIFrame.contentWindow.document.body.innerHTML; // Getting it's content into a variable

// Basically now, in the variable 'content' you have the content of your iframe,
// and can do anything you want with it.
alert('content: ' + content);    // here it is

However I am not getting any value of iframe content. What I am doing wrong here? I dont know much javascript, so I suspect that my syntax is wrong somewhere?

Given below is the content of my manifest.json---

{
  "name": "Link Submitter",
   "version": "1.0",
  "background_page": "bg.html",
  "description": "Link Submitter by SEO Power Toys",
   "browser_action": {
      "name": "Send Data",
      "default_icon": "icon.png",
      "default_title": "Send data to Link Submitter"      // optional; shown in tooltip
  },  
  "permissions": [ "tabs",
       "bookmarks",
           "http://*/*",
           "https://*/*",
            "unlimitedStorage"
     ]

}

Also given below is the error message I am getting in Javascript console, when I try to run the Google Chrome extension-

 Uncaught TypeError: Cannot read property 'document' of undefined
user893664
  • 309
  • 1
  • 8
  • 23
  • 2
    You must be trying to violate the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy). – Shef Sep 11 '11 at 19:51
  • What is in your "manifest.json"? You probably don't have the right permissions. – Michael Aaron Safyan Sep 11 '11 at 19:55
  • Also, as @Shref notes, this is a same-origin violation. There are some ways to get around it... but it's not really good security-wise. – Michael Aaron Safyan Sep 11 '11 at 19:56
  • i am running chrome with appropriate security flags disabled, so as to disable same origin policy- when I directly opened the HTML web page, I was able to access the content of iframe successfully. however when i made changes as described in my question, its not working... – user893664 Sep 11 '11 at 20:04
  • I copy-pasted your code directly to a local file, opened it in Safari and it worked just as the code states. – margusholland Sep 11 '11 at 20:05
  • update- i checked the javascript console, when i am running the google chrome extension, this is the error that i am getting -- Uncaught TypeError: Cannot read property 'document' of undefined. Can someone tell me how to resolve this? Thanks... – user893664 Sep 11 '11 at 20:07
  • Are you getting any errors in the Chrome console? – Pointy Sep 11 '11 at 20:12

1 Answers1

1

You cannot directly access or manipulate the contents of <iframe> elements that contain content from a domain different from your own. There are some ways of communicating between frames, but they require the content from both domains to be prepared to do that; you can't just expect any random page to work with those (fairly new) APIs.

Now, from an extension, of course, the rules are different. If you're playing around with the code on a regular web page, however, it just won't work.

edit — Here is a test case for your code. It seems to work just fine.

Pointy
  • 371,531
  • 55
  • 528
  • 584
  • please refer to my comments above – user893664 Sep 11 '11 at 20:05
  • Well let me try a similar experiment ... I presume you're talking about the "--allow-file-access-from-files" switch. – Pointy Sep 11 '11 at 20:06
  • Hi please refer http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy... – user893664 Sep 11 '11 at 20:11
  • i understand that directly injected into an html page as pure javascript, the code is working.. what i fail to understand is why the same code gives an error message when that code is injected into a page from google chrome extension as a content script... – user893664 Sep 11 '11 at 20:27
  • Ah, OK - I apologize for not recognizing the nature of your particular scenario. My Chrome extension experience is extremely limited and I've never tried what you're doing. – Pointy Sep 11 '11 at 20:45