This topic contains 15 replies, has 3 voices, and was last updated by Sean Sean 4 months, 1 week ago.

Page content inside iframe


  • IMX
    Participant

    Posts: 11
    Member Reply #3058

    Hi. I am integrating Metronic with an ASP.NET application.

    What I need is to load only the inner part of the page instead of all (menu + topbar + footer…) on every menu click.

    I used to do this with an IFrame.

    Inner pages comes also with all js and css styles and are showing ok.

    What I need is to adapt the iframe width & height to the correct area (I am using Metronic admin template Blank page sample as start).

    <!– BEGIN CONTENT –>

    <iframe id=”Content” src=”InnerPage.aspx”></iframe>

    <!– END CONTENT –>

    I tried with style width 100% & height 100%. No way to get that working.

    Also tried with a function attached to the window.resize event that accomodates the iframe, but I can’t get any success on this.

    In that function I am trying to get the SideBar Width & Height (with Style and clientWidth), but I always get 0.

    Also the TopBar & footer height (so I can at least adapt manually the iframe size)

    function adaptIFrame()

    {

    var mIframe;

    mIframe = document.getElementById(‘Content’);

    if (mIframe != undefined)

    {

    var mFooter;

    mFooter = document.getElementsByClassName(‘page-footer’);

    var mTopBar;

    mTopBar = document.getElementsByClassName(‘page-header-inner’);

    var mSideBar;

    mSideBar = document.getElementsByClassName(‘page-sidebar-wrapper’);

     

    if (mSideBar.length > 0 && mTopBar<span style=”line-height: 1.5;”>.length > 0 && </span>mFooter<span style=”line-height: 1.5;”>.length > 0</span><span style=”line-height: 1.5;”>)</span>

    {

    //Tried all this

    //mIframe.parentElement.style.height = window.document.body.clientHeight – mFooter[0].clientHeight – mTopBar[0].clientHeight;

    //mIframe.parentElement.style.height = window.document.body.clientHeight – 80 + ‘px’;

    //mIframe.style.height = mIframe.parentElement.style.height;

    mIframe.style.left = mSideBar[0].style.width;

    mIframe.parentElement.style.width = window.document.body.clientWidth  + ‘px’;

    mIframe.style.width = mIframe.parentElement.style.width;

    }

    }

    }

    Any suggestion?

    Thanks, Leonardo

    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #3081

    Hi,

    Can you please provide us a test link to your developing site in a private reply ? If we can check your code online we could provide you more effective support.

    Thanks.


    IMX
    Participant

    Posts: 11
    Member Reply #3136

    Hi.

    There’s no public URL. It is an Intranet Application interface.

    I just want to get the functionality as in the “Full Height Content” example, but instead of loading content inside a <div>, I need to load an independant aspx page inside an iframe.

    The result would be the same. A scrollable content separately from the menu, header and footer.

    Thanks, regards

    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #3150

    Hi,

    Sorry for the late reply.

    May i know which admin theme are you using ? Also can you let me know what is your layout settings ? All default or you have set fixed sidebar ? If you can provide more info i will advise you how you can implement the full height iframe.  In the main time you may continue your developing by fixing the iframe height manually until our further advice.

    Thanks.


    IMX
    Participant

    Posts: 11
    Member Reply #3262

    Hi. Sorry, I didn’t see your answer.

    Im using Admin 1 Default Layout.

    I took Blank page as starting point, and added:

    Body tag:

    <body class=”page-header-fixed page-quick-sidebar-over-content page-sidebar-fixed page-sidebar-closed page-footer-fixed”>

    Header area:

    <div class=”page-header navbar navbar-fixed-top”>

    Content area:

    <!– BEGIN PAGE CONTENT–>

    <div class=”row”>

    <div class=”col-md-12″>

    <div  class=”full-height-content full-height-content-scrollable”>

    <div class=”full-height-content-body”>

    Here I tryed adding an iframe or:

    <object type=”text/html” data=”./InternalPage.aspx” style=”overflow:auto; width:100%; height:100%;”>

    </object>

    Buy I can’t get the layout function like in Full Height Content example (but loading external aspx page).

    http://www.keenthemes.com/preview/metronic/theme/admin_1/layout_full_height_content.html

    Thanks in advance

    Regards


    IMX
    Participant

    Posts: 11
    Member Reply #3263

    Just in case, more details.

    I started from scratch from:

    file:///[Root for downloaded examples & docs]/themeforest-xxxxxxxx-metronic-responsive-admin-dashboard-template/v4.1.0/theme/templates/admin/layout_blank_page.html

    And need a behavior like:

    file:///[Root for downloaded examples & docs]/themeforest-xxxxxxxx-metronic-responsive-admin-dashboard-template/v4.1.0/theme/templates/admin/layout_full_height_content.html

    But with the contents loaded inside an iframe.

    Regards

    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #3291

    Hi,

    We would need some more clarifications. How about the page title and breadcrumbs ? Are they going to be inside the iframe or outside ?

    Thanks.


    IMX
    Participant

    Posts: 11
    Member Reply #3319

    Page title inside.

    No breadcrumb.

    Thanks


    IMX
    Participant

    Posts: 11
    Member Reply #3384

    Some hint here?

    Thanks

    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #3400

    Hi,

    Please use below HTML code for the content and put the iframe as shown below:

    <!– BEGIN CONTENT –>

    <div class=”page-content-wrapper”>

    <div class=”page-content”>

    <!– BEGIN PAGE CONTENT–>

    <iframe id=”iframe” style=”width: 100%” src=”#”></iframe>

    <!– END PAGE CONTENT–>

    </div>

    </div>

    <!– END CONTENT –>

    And use below code on document ready after Metronic and other class initialization:

    var height = Metronic.getViewPort().height – $(‘.page-header’).height() – $(‘.page-footer’).height() – 20;

    $(‘#iframe’).css(‘height’, height);

    You can adjust the height  as per your layout. 

    Thanks.


    IMX
    Participant

    Posts: 11
    Member Reply #3437

    Hi. Thanks. It worked but not as desired. It left some of the inner page unreachable and hidden after scrolled at the end.

    I implemented a different approach. I am posting it here just in case some one needs it.

    As the inner page renders also Metronic content, it grows once every init() is done at the bottom of the page, so, after all Metronic inits, I call this function:

    function resize() {

    var isInIframe = window.frameElement && window.frameElement.nodeName == “IFRAME”;

    if (isInIframe && window.frameElement.id == ‘contentIframe’) {

    var height = document.getElementsByTagName(“html”)[0].scrollHeight + 20; window.frameElement.style.height = height + ‘px’; }

    };

    $(document).ready(function () {resize();});

    The jquery document ready appends that call after all other ready statems (all init()), so, once the page is “Metronized” 😉 and got the new scrollHeight it checks itself if it is contained inside the content Iframe and resizes it to its own height (plus 20, don’t know why but looks better).

    Going further. As I am working with ASP.NET, and every page inherits from a custom BasePage, I added to the ASP.NET Sub Render event the following:

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

    Dim mScript As String = “<script type=””text/javascript””>function resize() {” & _

    ”    var isInIframe = window.frameElement && window.frameElement.nodeName == “”IFRAME””;” & _

    ”    if (isInIframe && window.frameElement.id == ‘contentIframe’)” & _

    ”     {” & _

    ”        var height = document.getElementsByTagName(“”html””)[0].scrollHeight + 20;” & _

    ”        window.frameElement.style.height = height + ‘px’;” & _

    ”    }” & _

    “};$(document).ready(function () {resize();});</script>”

    Page.RegisterStartupScript(“resizeIframe”, mScript)

    MyBase.Render(writer)

    End Sub

    The RegisterStartupScript adds the block at the end of the page (just before closing Form & Body), so I have to do nothing. All pages automatically finds and resize the content Iframe if necesary.

    Hope this helps.

    Regards

    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #3448

    Hi :),

    Great. Glad to see that you were finally able to settle it. Good luck with your project

    Thanks.


    fkocaman
    Participant

    Posts: 4
    Member Reply #13263

    hi;

    I added this code but show header and footer code.

    <iframe src=”#/operatorConfig.html” name=”iframe” width=”700″ height=”500″ frameborder=”0″ ></iframe>

    How to remove footer and header code?

    screenshot link:

    https://pasteboard.co/GXdrQvh.jpg

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4380
    Support Staff Reply #13298

    Hi,

    The iframe content is loaded from operatorConfig.html file and you will need to remove the header and footer in this file. 

    Thanks.


    fkocaman
    Participant

    Posts: 4
    Member Reply #13313

    Hi Sean;

    Thank you for response but this way is workaround.May be I am building the page wrong way. How can I create a page that shows only the html file (without header,footer,sidebar) ?

    • This reply was modified 4 months, 1 week ago by  fkocaman.

You must be logged in to reply to this topic.