The Firefox tab continues to load endlessly due to an embedded iframe

As I test an HTML page on Firefox Developer, I encounter an issue with an iframe. While the iframe works fine on Google Chrome, it causes the parent page to continuously load on Firefox. This leads to a degradation in performance after a few minutes. The iframe is initially empty but later filled with HTML content retrieved from an AJAX request, with the goal of displaying the body of an email. I am using AngularJS on the page, though I don't believe this is the cause of the problem. I have attempted to remove all JavaScript interactions with the iframe and even tried pointing it to a real empty file, but the issue persists.

<iframe frameborder="0" scrolling="no" sandbox="allow-same-origin" class="p-y" width="100%" ng-init="resizeFrame()"></iframe>

(I added a sandbox attribute in case of origin issues, but it did not solve the problem)

Can anyone identify what the problem might be and suggest a solution?

javascriptangularjsfirefoxiframe

Answer №1

If you want to incorporate dynamic data into your webpage, a straightforward way to do so is by using a simple [div] tag.

Start by creating an empty tag:

<div id="result"></div>

Then, once your AJAX call is successful, you can populate the div with your HTML content:

function getData(){
    document.getElementById('result').innerHTML = "<b>Sender :</b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b4b7b695bdb0b4a7a1fbb6bab8">[email protected]</a><br/><b>Subject :</b> Hello world";
}

You can view a running sample on jsfiddle here (note: in this example, I am simulating the AJAX call with a JavaScript function).

UPDATE (in response to a comment)

When setting innerHTML, headers are ignored. View the updated jsfiddle demo for a demonstration where only contents are added to the div.

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

Exploring the use of ngResource in conjunction with HttpBackend - Potentially unreached rejection issue

Issue Currently, I am working on testing a controller utilizing Karma, Mocha, Chai, and PhantomJS as part of the testing process. IndexCtrl.js (simplified) app.controller('IndexCtrl', ['$scope', '$resource', function($scope ...

javascriptangularjsmocha.jskarma-runnerangularjs-ngmock

Instructions for converting a readonly text field into an editable one using JavaScript

I'm trying to make it so that when the button (with id name_button) is clicked, the text field (with id name_text_field) becomes enabled. However, my current code doesn't seem to be working. Here's a snippet of my HTML: <input type="tex ...

javascriptjqueryhtml

Having trouble installing gatsby-plugin-transition-link using npm

https://i.stack.imgur.com/DyZxQ.png I'm facing some issues while trying to install gatsby-plugin-transition-link using npm. No matter what solutions I've attempted, the errors persist. Can anyone provide insight into what might be causing this p ...

javascriptreactjsnpmpackagegatsby

problem with transmitting information through $.ajax

I'm facing a frustrating issue with the $.ajax()... function in my PHP code. I am unable to retrieve the data sent by the ajax request. <?php if ($_POST){ include 'Bdd_connexion.php'; $filiere = $_POST['filiere']; ...

javascriptphpjqueryhtmlajax

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

Encountering silence: React JS fetch call left unanswered by Sinatra server

Exploring the realms of Sinatra and React JS, I am venturing into making a GET call from my React website to a Sinatra server in order to display plain text. The Sinatra Server script: require 'sinatra' set :root, 'lib/app' before d ...

javascriptrubyreactjssinatrafetch-api

What could be the reason behind jQuery replacing the entire span with .text?

I am dealing with the following HTML code snippet: <p><input id="revenue" type="text" value="100000" /><span id="howmuch"><a href="" class="ka_button small_button small_cherry" target="_self" style="opacity: 1; "><span>How Mu ...

javascriptjqueryhtml

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

javascriptnode.jsaws-lambdaamazon-dynamodb

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

javascriptjquerycssmagento

Error: Unable to access length property of null object. Can you explain this to me?

One of my questions that I'm trying to solve is about the error message "Cannot read properties of null (reading 'transition'). What does it mean?". I tried using the solution suggested in this question on integration of 'mychart.update ...

javascriptvue.jschart.js

Next JS encountered an error - Error [ERR_HTTP_HEADERS_SENT]: It is not possible to set headers after they have already been sent to the

Having crafted a serverless application using next.js, Vercel, and Google Sheets to store customer contact data, I encountered an issue post-deployment. While my application works flawlessly locally, after deployment, I started receiving the following erro ...

javascriptgoogle-sheetsnext.jsreact-hook-form

Issues with Markdown text editor code, table, and list functionalities are causing malfunction

Looking for a solution to use markdown editor for writing blog posts? If you're facing issues with code blocks, list items, tables, etc., not working correctly after publishing your markdown-based posts, while other elements like images, links, and bo ...

javascriptnode.jsreactjsnext.jsr-markdown

What is the best way to initiate the handling of newly inserted values in a Vuex store?

I am working with a Vuex store that stores entries: const store = createStore({ state() { return { entries: [ { id: 1, date-of-birth: "2020-10-15T14:48:00.000Z", name: "Tom", }, ...

javascriptvue.jsvuex

Modifying the geometry of a plane in Three.js

Currently working on a simple terrain editor. When the mouse is clicked, I want the selected face to move up. The intersection is functioning well, and I am attempting to adjust the geometry in this manner: var intersects2 = ray.intersectObjects([ ...

javascript3dwebglthree.jsterrain

Is there a way to pre-format a phone number field using jQuery?

Looking to create a phone number text field with a pre-formatted 10-digit structure, like this: |( ) - | allowing users to input numbers and have them fill in automatically: |(804) 479-1832| I came across a helpful script for formatting input d ...

javascriptjqueryuser-interfacefield

The v-text-field within the activator slot of the v-menu mysteriously vanishes upon navigating to a new route within a

Working on my Nuxt project with Vuetify, I encountered an issue where the v-text-field would disappear before the page changed after a user inputs date and clicks save. This seems to be related to route changing, but I have yet to find a suitable solutio ...

javascriptreactjsvue.jsvuetify.jsnuxtjs

Unable to retrieve data from Meteor find query

I have a collection created in collections.js portfolioItems = new Mongo.Collection('portfolioitems'); This collection is then subscribed to in subscriptions.js Meteor.subscribe('portfolioitems'); And published in publications.js M ...

javascriptmongodbmeteoriron-router

Enhancing functionality with extra JavaScript tags in next.js

Recently, I delved into programming with react & next.js after previously working with node.js. It didn't take long for me to create my first application, but upon inspecting the page, I noticed an abundance of extra JavaScript code (see image below). ...

javascripthtmlreactjsnext.js

Is there an issue with Three.js canvas.toDataURL() function in Chromium browsers?

After performing a recent system upgrade, I noticed some issues with Chromium. One of them was a delay in loading my Three.js r85 project, which was resolved after upgrading to Three.js r90. However, I encountered a new problem with toDataUrl() not workin ...

javascriptthree.jshtml5-canvaschromiumarchlinux

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

javascripthtmlangularsystemjs