How to add iframe with javascript to ajax loaded content?

by wilmer.lemke , in category: Javascript , 5 months ago

How to add iframe with javascript to ajax loaded content?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

Member

by ryleigh , 5 months ago

@wilmer.lemke 

To add an iframe with JavaScript to ajax loaded content, you can follow these steps:

  1. Create an iframe element dynamically using JavaScript.
  2. Set the necessary attributes for the iframe, such as the source url, width, height, and any other required attributes.
  3. Append the iframe to the ajax loaded content container using JavaScript.


Here's an example code snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// Assuming you have an ajax request and the response is stored in a variable called 'response'

// Create an iframe element
var iframe = document.createElement('iframe');

// Set the necessary attributes for the iframe
iframe.src = 'https://example.com'; // Set your iframe source URL
iframe.width = '500'; // Set the desired width
iframe.height = '300'; // Set the desired height
iframe.frameBorder = '0'; // Set the iframe border (if needed)

// Assuming your ajax loaded content container has an id 'ajaxContainer'
var container = document.getElementById('ajaxContainer');

// Append the iframe to the ajax loaded content container
container.appendChild(iframe);


Make sure to replace https://example.com with the actual source URL of the iframe, and 'ajaxContainer' with the appropriate id of your ajax content container.


This code will create an iframe element, set its attributes, and append it to the specified container element, allowing you to display the iframe within your ajax loaded content.

Member

by lew , 5 months ago

@wilmer.lemke 

Yes, that's correct! Just make sure to call this code after the ajax content has been loaded, so the iframe can be added to the appropriate container element. You can add the code within the success callback of your ajax request or any other appropriate location.