How to access the webresource controls from another html webresource on CRM 2016 Form?

Question

I have two html webresources in my customer form, one contains a multitab and second contains some tiles, designed using bootstrap and JQuery for events. Want to initiate a Click event of tab exist on first webresource on the click of tiles exist on second webresource.

I have prepared the script on simple html page first all code is working there but not on crm form.

1. How can I access the tab controls using JQuery from first webresource?
2. I have written some scripts on each html webresources, can I use the same script/function from another html webresource?

Webresource_1

  //html

    <div class="row">     
         <ul id="tab_container_01" class="nav nav-tabs">
         <li id="tab_cases"><a id="ahref_cases" href="#">Cases</a></li>
         </ul>
    </div>
    //script
    //Following script is working fine on the same page
    <script type="text/javascript">
    $("ul.nav-tabs").on("click", "li", function () {
        var selectedTabText = ($(this).find("a").text());
        var tabs = window.parent.Xrm.Page.ui.tabs;
        //Some toggle script
    });

</script>

Webresource_2

//html

<div class="panel">           
    <div> Open Cases </div>
</div>

//script
<script type="text/javascript">
$(".panel").on("click", "div", function () {

// following not working on crm form
$("#tab_cases").addClass('active');
$("#tab_cases").parent().siblings().removeClass('active'); //length 0, id not detecting

//window.parent.$("#tab_cases").parent().siblings().removeClass('active');

/* trigger click event on the li */
//trying to use function written on webresource_1 script

$("#tab_cases").closest("ul.nav-tabs li").trigger('click'); //*Not Triggering*
});
</script>

Answer 1

尽管从技术上讲，由于您全都在CRM中，并且不会遇到任何跨域脚本问题，所以这可能有些过头了，您可以使用Frame1的Window.Post消息与CRM表单进行通信，然后它将与第2帧进行通信。这也意味着您的脚本不必依赖于每个DOM，其他脚本也可以订阅相同的接口来发布/接收消息。