CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Raman Gupta
Raman Gupta

Reputation: 41

read iframe content html

In my page i am having an iframe, the source of the iframe is a url which is having a page of another server.

When the page is loading its fetching the output and display it in the iframe.

Now i want to copy the content of the iframe once it is loaded completely using the below code --

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
    function getContent()
    {
        var frame = window.frames["iView"].document;
        alert(frame.getElementById('CMS').innerHTML);
    }
</script>
</head>
<body>
  <iframe src="http://www.example.com/abc.jsp" name="iView" style="width:600px;height:800px;border:dotted 1px red" frameborder="0" onload="getContent();"></iframe>
</body>
</html>

But its not working, i tried to use many ways using jquery also, but in jquery its running the jquery before loading the iframe content which will definitely not work. Kindly suggest.

Upvotes: 1

Views: 683

Answers (1)

Elisha Senoo
Elisha Senoo

Reputation: 3594

The browser loads the page content from top to bottom, according to the order of your code.

Use jquery ready function to make a function available after the document is loaded. In that case, your code should look like this:

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        function getContent()
         {
            var frame = window.frames["iView"].document;
            alert(frame.getElementById('CMS').innerHTML);
         }

         getContent();
    });
</script>
</head>
<body>
  <iframe src="http://www.example.com/abc.jsp" name="iView" style="width:600px;height:800px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

Upvotes: 1

Related Questions