Skip to content

Commit 2188bde

Browse files
authored
Reload & fix resize
Reload, resize fix and better docs
2 parents 116aec5 + 6d6cc63 commit 2188bde

7 files changed

Lines changed: 724 additions & 140 deletions

File tree

README.md

Lines changed: 119 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ A security-first Blazor iframe component with automatic resizing, cross-frame me
2222
- **Navigation Tracking** - Capture iframe navigation events with URL and query parameters
2323
- **Sandbox Support** - Multiple security levels from permissive to paranoid isolation
2424
- **Environment-Aware** - Different configurations for development vs production
25-
- **Automatic Resizing** - Smart height adjustment based on iframe content
25+
- **Automatic Resizing** - Smart height adjustment based on iframe content with configurable options
26+
- **Programmatic Reload** - Refresh iframe content without recreating the entire component
2627

2728
## Documentation
2829

@@ -125,6 +126,76 @@ var paymentOptions = new MessageSecurityOptions()
125126
.ForPaymentWidget();
126127
```
127128

129+
### Auto-Resize Configuration
130+
131+
Control how the iframe automatically adjusts its height based on content:
132+
133+
```razor
134+
<BlazorFrame Src="https://example.com"
135+
EnableAutoResize="true"
136+
ResizeOptions="@resizeOptions" />
137+
138+
@code {
139+
// Custom resize configuration
140+
private readonly ResizeOptions resizeOptions = new()
141+
{
142+
MinHeight = 200,
143+
MaxHeight = 2000,
144+
PollingInterval = 500,
145+
DebounceMs = 100,
146+
UseResizeObserver = true
147+
};
148+
149+
// Or use built-in presets:
150+
// ResizeOptions.Default - Balanced defaults
151+
// ResizeOptions.Performance - Less frequent updates (better performance)
152+
// ResizeOptions.Responsive - More frequent updates (smoother resizing)
153+
}
154+
```
155+
156+
| Property | Default | Description |
157+
|----------|---------|-------------|
158+
| `MinHeight` | 100 | Minimum height in pixels |
159+
| `MaxHeight` | 50000 | Maximum height in pixels |
160+
| `PollingInterval` | 500 | Fallback polling interval (ms) when ResizeObserver unavailable |
161+
| `DebounceMs` | 100 | Debounce delay to prevent excessive updates (0 to disable) |
162+
| `UseResizeObserver` | true | Use ResizeObserver API when available |
163+
164+
### Programmatic Reload
165+
166+
Refresh iframe content without recreating the entire component - useful for PDFs, dynamic content, or cache-busting:
167+
168+
```razor
169+
<BlazorFrame @ref="iframeRef" Src="@pdfUrl" />
170+
171+
<button @onclick="RefreshContent">Refresh</button>
172+
<button @onclick="LoadNewDocument">Load New Document</button>
173+
174+
@code {
175+
private BlazorFrame? iframeRef;
176+
private string pdfUrl = "https://example.com/document.pdf";
177+
178+
// Reload the current content
179+
private async Task RefreshContent()
180+
{
181+
if (iframeRef != null)
182+
{
183+
await iframeRef.ReloadAsync();
184+
}
185+
}
186+
187+
// Load a new URL with cache-busting
188+
private async Task LoadNewDocument()
189+
{
190+
if (iframeRef != null)
191+
{
192+
var cacheBustedUrl = $"https://example.com/document.pdf?v={DateTime.UtcNow.Ticks}";
193+
await iframeRef.ReloadAsync(cacheBustedUrl);
194+
}
195+
}
196+
}
197+
```
198+
128199
### Content Security Policy
129200

130201
```razor
@@ -168,13 +239,56 @@ All iframe messages are automatically validated for:
168239

169240
### Sandbox Security Levels
170241

171-
| Level | Description | Use Case |
242+
| Level | Permissions | Use Case |
172243
|-------|-------------|----------|
173244
| **None** | No restrictions | Trusted content only |
174245
| **Basic** | Scripts + same-origin | Most trusted widgets |
175-
| **Permissive** | + forms + popups | Interactive widgets |
176-
| **Strict** | Scripts + same-origin only | Display widgets |
177-
| **Paranoid** | Scripts only | Untrusted content |
246+
| **Permissive** | Scripts + same-origin + forms + popups | Interactive widgets |
247+
| **Strict** | Scripts only (no same-origin) | Semi-trusted content |
248+
| **Paranoid** | Empty sandbox (no permissions) | Untrusted content |
249+
250+
## API Reference
251+
252+
### Component Parameters
253+
254+
| Parameter | Type | Default | Description |
255+
|-----------|------|---------|-------------|
256+
| `Src` | `string` | `""` | The URL to load in the iframe |
257+
| `Width` | `string` | `"100%"` | Width of the iframe |
258+
| `Height` | `string` | `"600px"` | Height of the iframe |
259+
| `EnableAutoResize` | `bool` | `true` | Enable automatic height adjustment |
260+
| `ResizeOptions` | `ResizeOptions?` | `null` | Configuration for auto-resize behavior |
261+
| `EnableScroll` | `bool` | `false` | Enable scrolling on the wrapper |
262+
| `EnableNavigationTracking` | `bool` | `false` | Track iframe navigation events |
263+
| `AllowedOrigins` | `List<string>?` | `null` | Allowed origins for postMessage |
264+
| `SecurityOptions` | `MessageSecurityOptions` | `new()` | Security configuration |
265+
| `CspOptions` | `CspOptions?` | `null` | Content Security Policy configuration |
266+
267+
### Component Methods
268+
269+
| Method | Returns | Description |
270+
|--------|---------|-------------|
271+
| `ReloadAsync()` | `Task` | Reloads the iframe content |
272+
| `ReloadAsync(string newSrc)` | `Task` | Reloads with a new source URL |
273+
| `SendMessageAsync(object data, string? targetOrigin)` | `Task<bool>` | Sends a message to the iframe |
274+
| `SendTypedMessageAsync(string type, object? data, string? targetOrigin)` | `Task<bool>` | Sends a typed message |
275+
| `GetRecommendedCspHeader()` | `CspHeader?` | Gets the recommended CSP header |
276+
| `ValidateCspConfiguration()` | `CspValidationResult?` | Validates the CSP configuration |
277+
278+
### Events
279+
280+
| Event | Type | Description |
281+
|-------|------|-------------|
282+
| `OnLoad` | `EventCallback` | Fired when iframe loads |
283+
| `OnMessage` | `EventCallback<string>` | Fired on message (raw JSON) |
284+
| `OnValidatedMessage` | `EventCallback<IframeMessage>` | Fired on validated message |
285+
| `OnSecurityViolation` | `EventCallback<IframeMessage>` | Fired on security violation |
286+
| `OnNavigation` | `EventCallback<NavigationEvent>` | Fired on navigation |
287+
| `OnUrlChanged` | `EventCallback<string>` | Fired on URL change |
288+
| `OnMessageSent` | `EventCallback<string>` | Fired when message sent |
289+
| `OnMessageSendFailed` | `EventCallback<Exception>` | Fired on send failure |
290+
| `OnCspHeaderGenerated` | `EventCallback<CspHeader>` | Fired when CSP generated |
291+
| `OnInitializationError` | `EventCallback<Exception>` | Fired on init failure |
178292

179293
## Demo
180294

0 commit comments

Comments
 (0)