On window resize event javascript on object tag

Question

I have created Jquery tabs and embedded a JSP page on the parent page. I have called on window resize events on both pages. But the inner page function does not get invoked.

For the inner page I have an SVG element which needs to be resized every time the window is resized.

sLinkPageToJunction = '<%=base1%>' + "/InnerTabbedPage.jsp?IntersectionName=" + strIntersectionName + "&FrameName=" + strFrameName + "&ip=" + '<%=ServerIP %>' + "&port=" + '<%=ServerPORT %>' + "&InterCorridorName=" + svgfilename;
if (document.getElementById("JnLive" + strIntersectionName) == null) {
    //var nextTab = $('#tabs li').size()+1; 
    Tabcount = $('#tabs li').size();
    // create the tab
    $('<li><a href="#tab' + strIntersectionName + '" data-toggle="tab">' + strIntersectionName + '&nbsp;&nbsp; <button class="close closeTab" align="right" "type="button">x</button></a></li>').appendTo('#tabs');

    // create the tab content

    $('<div class="tab-pane" id="tab' + strIntersectionName + '"> <div id="JnLive' + strIntersectionName + '" class="col-sm-6" style="margin-top: 1%"> </div>').appendTo('.tab-content');


    var heightvalue = $(window).height();
    var widthvalue = $(window).width()

    //alert("---->"+heightvalue+"---->"+widthvalue);

    var url = "<object id=obj'" + strIntersectionName + "' data='" + sLinkPageToJunction + "' height='" + heightvalue + "' width='" + widthvalue + "'></object>";

    $("#JnLive" + strIntersectionName).html(url);

    // make the new tab active
    $('#tabs a:last').tab('show');
    OpenedTabbedJunctionNames[Tabcount - 1] = strIntersectionName;
    OpenedTabbedJunctionFrameNames[Tabcount - 1] = strFrameName;

    registerCloseEvent();
}

So it creates a new tab if it does not already exist.

Now my on windowresize event on the inner page is

window.addEventListener('resize', changeframesizeJN) ;

on the outer page it is

window.addEventListener('resize', changeframesize) ;

But when I resize the window with the tab selected changeframesizeJN is not invoked.

How can I do that?

P.S: I dont know if I have put the information that is required for the question to be answered. The fact is I am not sure how to ask this question.

Answer 1

You give your panel a fixed width and height from what I can tell from your code. You should change the CSS of your inner page to resize with it's parent.

Alternatively you could call the inner page function on the resize of its outer parent as well as its own. Since its on the same domain you won't have any problem doing this:

window.addEventListener('resize', function() {
    changeframesize();
    window.frames['yourIframeName'].changeframesizeJN();
});

Just make sure you give your inner window a name so you can select it. Or use it's index but I would recommend using a name to keep it readable:

window.frames[0].changeframesizeJN();