CODEWITHSUNDEEP
javascriptjqueryjspiframejquery-1.9
Human Being
Human Being

Reputation: 8387

jquery - how to get text of a div inside a iframe

This jsp is inside the iframe which is generated dynamically ,

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/chat.css">
<title>Heart JSP page</title>
</head>
<body>

    <div id="messageArea" class="divBorder">
    <% String intxnId = request.getParameter("intxnId");  %>
     Chat Interaction id is : ?<%= intxnId%> 

    </div>
    <div id="enterMessage" class="divBorder">
    Your message Area
    </div>
</body>
</html>

My iframe and its id is generated dynamically.Inside the Iframe I inserted the above jsp page .

Now I need to get the text value of the div with id=messageArea in the jsp using jquery.

I used ,

    var  intxnId = `ch54p3443`;

var sss = $("#ch"+intxnId).contents().find("#messageArea").text();
alert("sss : "+sss);

$("#ch"+intxnId) will be my iframe selector.

But no value is assigned to the variable sss.

Upvotes: 0

Views: 1357

Answers (1)

David Lin
David Lin

Reputation: 13353

You need to reference the DOM object of the page inside your iframe first. And your iframe page must be from the same domain of the parent page due to the cross domain restriction.

I've set up a fiddle to show how to access the elements of a iframe page:

http://jsfiddle.net/ts5Z7/

Basically with your code, that means something like:

var  intxnId = `ch54p3443`;
var frameRef = $("#ch"+intxnId)[0];
var frameDocument = frameRef.contentWindow ? frameRef.contentWindow.document :frameRef.contentDocument;

var sss = $(frameDocument).find("#messageArea").text();
alert("sss : "+sss);

Upvotes: 1

Related Questions