Is there a way to have dynamic content from angularJS show up in an iframe?

When working with tabular content generated using ng-repeat in AngularJS, it is important to find a way to display this content within an iframe. The goal is to allow users to drag and resize the content as needed.

However, using the iframe src attribute won't work in this scenario since it requires a URL, and the content is being generated on the client side.

One potential solution could involve utilizing a variation of the srcdoc attribute, although it typically expects a single quoted line of HTML code.

So the question remains: How can I properly construct the iframe to ensure that the content produced by ng-repeat is successfully displayed within it?

javascriptangularjsiframe

Answer №1

If you want to incorporate an AngularJS table into an iframe, there are some limitations within HTML5 that you need to be aware of. Here is an example of how it can be done:

HTML

<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>

Javascript

document.getElementById("frame").contentWindow.document.getElementById("mydiv")

Instead of using the src attribute, you have the option to utilize the srcdoc property which allows you to input code directly for the content. The use of "seamless" along with srcdoc signifies to the browser that the contents of the iframe should integrate seamlessly with the webpage rather than appearing as a separate entity. However, this may alter the styling and functionality of the iframe, such as the disappearance of resize handles.

Alternatively, consider implementing jQuery UI resizable instead: https://jqueryui.com/resizable/

For testing purposes, here is a basic fiddle where I experimented with controlling iframe content, highlighting the complexities involved: Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

I need to implement dynamic buttons in my HTML document while a JavaScript class is running and receives a response from the backend. I am using jQuery and vanilla JS, and have included an example below to demonstrate this functionality. The goal is to dis ...

javascripthtmljquerybootstrap-5

Setting a value to an anchor tag in AngularJS

A user is presented with a list of options (e.g. 1. Apple; 2. Banana; 3. Mango). They are provided with a textbox where they can input their desired option and then click "send" to proceed. Current Setup: HTML: <p ng-repeat="opt in objHistory.OptionI ...

angularjs

Are the charts missing from the Django admin interface?

I am working on incorporating charts into my admin view by extending the admin/base.html file. Instead of using libraries like charts.js, I prefer to use a template for displaying the charts. Ideally, I want my view to resemble this example (). You can fin ...

javascriptpythondjangocharts

Utilizing Angular to interactively update the scope through an event listener

Hey everyone, I could use some guidance on a problem I'm facing. Currently, I am working with Angular and the angular google maps directive. I have set up an event handler for 'idle' in order to update which markers are displayed on the map. ...

angularjsgoogle-maps

Generated Form Data Automatically

Seeking advice on achieving a specific functionality in ASP.NET Web Form that is similar to the AutocompleteExtender, but requires more flexibility. Here is what I aim to accomplish: There are 2 TextBox fields on the form: CompanyName and CompanyRef (a u ...

asp.netjavascriptajaxwebforms

What is the best way to separate my Webpack/Vue code into a vendor.js file and exclude it from app.js?

My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this proc ...

javascriptvue.jswebpacklaravel-mixvendor

How can I render just one event instead of all events when using the eventRender callback function?

I am currently working on adding an event to my calendar using a JSON format with specific attributes like id and start time. Here is what I have tried so far: $('#calendar').fullCalendar('renderEvent', my_event); $('#calendar& ...

javascriptjqueryfullcalendar

Ensuring the validity of controls within various div elements using AngularJS

I have implemented AngularJs in my project and I am facing an issue with two div elements that are being hidden and shown alternately. Each div contains certain controls with "required" validation set on the submit button click event. By default, the div n ...

angularjs

How to selectively hide the menu button in Ionic framework when not within the <ion-view> element

Within the framework of Ionic, my goal is to dynamically hide the menu button based on certain conditions. However, due to other constraints, I had to separate the menu into its own controller to avoid completely re-rendering the menu and header bar every ...

angularjsionic-framework

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Having trouble getting the map function to work in ReactJs while using Next.js?

Hey there, I am diving into ReactJS with the "Nextjs" framework and working on fetching data using async functions. However, I am facing an issue where I am unable to fetch data using the map function. The console.log is displaying a message saying "item ...

javascriptreactjsnext.js

Run javascript code after the page has transitioned

Struggling to create a dynamic phonegap app with jQuery Mobile, the issue arises when loading JavaScript on transition to a new page. The structure of my index page is as follows: <body> <div data-role="page" id="homePage"> <div data- ...

javascriptjqueryhtmljquery-mobilejquery-mobile-ajax

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

javascriptjquerycsscarousel

The navigation bar is positioned with white space above it

Currently working on a website design and facing an issue with adding a clickable button to the Nav-bar. Noticed some white-space above the Nav-bar which is not desired. I had previously posted a similar question but unable to identify the CSS error causi ...

javascripthtmlcss

Stop submission of form using react by implementing e.preventDefault();

Having trouble figuring this out.... Which event should I use to bind a function call for e.preventDefault(); when someone clicks enter in the input tag? Currently experiencing an unwanted refresh. I just want to trigger another function when the enter k ...

javascriptreactjs

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

As I embark on creating a webpage, my goal is to have it display different content based on the user's browser. The SERVER [HTTP_USER_AGENT] variable initially seemed promising for this purpose, but upon inspecting the page in Chrome, I encountered: ...

javascriptphphtmlinternet-explorerbrowser

Image loading failure detected in ReactJS

In my current project using Reactjs (Nextjs framework), I encountered an issue where I am unable to display an image on a page without specifying the "height" and "width" attributes in the Image tag. I attempted the following code snippet but the image is ...

javascriptreactjsnext.js

Having trouble incorporating Duo Web SDK into angular application

We are currently working on incorporating Duo Two-factor authentication into our Angular application. For instructions, you can take a look at the documentation available here. The issue we are encountering is that their JavaScript file searches for an i ...

javascriptangulariframe

Sort your Laravel pagination table effortlessly with just one click

Here is my current setup: <table class="table table-striped"> <tr> <th> Item Image </th> <th> Item Number </th> <th> Item Name </th> <th> Description </th> ...

javascriptphpjquerylaravelsorting

Unspecified scope within the $watch function

Within my custom directive dir, I am using the following: ng-model="job.start_date" comparison-date="job.end_date When attempting to access the ng-model value inside scope.$watch("comparisonDate..., I am running into an issue where scope is undefined wi ...

angularjsangularjs-directiveangularjs-scope