Question

In our web application, we have multiple small applications availables. Let us say A,B,C.
“A” using Jquery1.4 version. Which is very successful version. And they developed couple of Components.

So, We Team “B” also want to use same components and jquery version. If they A changed, we need to change accordingly.
Currently we are using iFrames because, some times we need access on “A” applications. Right now, we might not change to Iframe concept.

So, similiary using Iframes, we want to use Project A’s Js and CSS files.
Files are successfully loaded. but Js methods and CSS properties we are unable to access.

Let us give Example:->

I am trying to access any class using Jquery methods,

$(" .ap-bar-section-Accounts")[2].click();

As per comments, i added script tag for iFrame jquery url

<script type="text/javascript" src="A's location of jquery></script>

But, i am getting error “$” is undefined. but, if i see IE Debugger tool, i can see Jquery file loaded.
What could be the reason. If u need any further details, let me know. Same code working in firefox and mozilla

As per comments,
i am confirming both servers related to https only.

Answer 1

Your example code is invalid jQuery

 $(" .ap-bar-section-Accounts")[2]// returns DOM node

Should be

 $(".ap-bar-section-Accounts").eq(2).click();

Before binding any code to iFrame events from parent page, make sure iFrame has loaded

$(function(){
    var $frame=$('#iframeId');
    $frame.load(function(){
         $frameBody= $(this).contents().find('body');
         $frameBody.find$(".ap-bar-section-Accounts").eq(2).click();
    });
})