CODEWITHSUNDEEP
asp.netangulariframemaster-pagesiframe-resizer
Jeff O'Connell
Jeff O'Connell

Reputation: 19

Using iframe-Resizer Library in an ASP.Net Web forms solution using Master pages with the iframe displaying content from an Angular app. (v.16.2.12)

I'm new to the iframe-resizer library and was wondering if I could get some advice/suggestions/recommendations re: a question I have for using iframe-resizer in an ASP.NET Web forms app, using Master Pages and Angular (16.2.12).

I have an old legacy application written in C# using Master Pages (.NET Framework 4.5.2). One of the content pages is using an iframe for hosting an Angular app. I need the iframe page to automatically adjust to the content's height of the Angular app pages.

I have added the iframeResizer.js file to the asp:Content placeholder section of the ASP.Net solution and the iframeResizer.contentWindow.js file to the Angular Index.html page.

Here's my content placeholder page code Before I added the iframe-Resizer code:

<%@ Page Language="C#" AutoEventWireup="true" Code Behind="ContactList.aspx.cs"
Inherits="XYZ.ABCAdmin.WebForms.ContactList"
MasterPageFile="~/XYZ.Master" %>

<asp:Content ID="cntPage" ContentPlaceHolderID="PageContent" runat="server">
<asp:PlaceHolder ID="controlPlaceHolder" runat="server">
<iframe runat="server" id="frmContactList" width="100%" frameborder="0" /> 
</asp:PlaceHolder>
</asp:Content>

Here's my content placeholder page code AFTER I added the iframe-Resizer code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContactList.aspx.cs"
Inherits="XYZ.ABCAdmin.WebForms.ContactList"
MasterPageFile="~/XYZ.Master" %>

<asp:Content ID="cntPage" ContentPlaceHolderID="PageContent" runat="server">
<asp:PlaceHolder ID="controlPlaceHolder" runat="server">
<style> iframe { width: 1px; min-width: 100%; } </style> 
<iframe runat="server" id="frmContactList" width="100%" frameborder="0" /> 
<script src="../Scripts/iframeResizer.js"></script>
<script> iFrameResize({ log: true }, '#frmContactList') </script>
</asp:PlaceHolder>
</asp:Content>

I believe I'm accessing both the js files (iframeResizer.js & iframeResizer.contentWindow.js) correctly. I think I'm accessing the files correctly because the master page is displaying an alert I inserted in iframeResizer.js file, and the angular page is displaying an alert I inserted in iframeResizer.contentWindow.js file.

My issue is with the Angular page content that shows in the iframe. I'm not seeing changes to the iframe height and/or any logs to the console. Is there something else I need to be doing with either the master page iframe or the index.html page in my Angular App?

Here' my index.html code from my Angular app:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XYZ NG App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="application/javascript" src="./assets/js/iframeResizer.contentWindow.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Am I accessing the iframeResizer.contentWindow.js file in my Angular app (v.16.2.12) properly? If not, Any examples on how to access the iframeResizer.contentWindow.js file would be helpful.

I feel like I'm close to the finish line.

Any help, comments/suggestions/recommendations would be greatly appreciated. Thanks

I have tried to follow the example on David Bradshaw's GitHub page for iframe-Resizer library but I'm not 100% sure I have installed and that I'm calling the library correctly.

I'm expecting to see the iframe height dynamically display the content from the Angular app. I'm also expecting to see the logs to the console since I have it turned on.

Upvotes: 0

Views: 63

Answers (0)

Related Questions