Inject CSS into an iframe containing a JavaScript form by iterating over a collection of iframes

My task is to manipulate an iframe (chatbox) once it's loaded on a webpage. This chatbox consists of four iframes, each with a different id that changes with every page load. Since the iframe that needs manipulation is always the last one in the list, I decided to use getElementsByTagName("iframe").

However, for some reason, no styles are being applied to this last iframe:

<script> 
window.onload = function() {
   let myiFrame = document.getElementsByTagName("iframe");
   let doc = myiFrame[3].contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{display:block !important}</style>";
   
    }</script>
javascriptcssiframe

Answer №1

utilize

myFrame[3].style.cssText = "display:block !important"

transform your code into

<script> 
window.onload = function() {
   let myFrame = document.getElementsByTagName("iframe");
   myFrame[3].style.cssText = "display:block !important";
   }
</script>

An example of functioning code: 

<!DOCTYPE html>
<html>
<body>

<p id="myP1" style="display: none!important">This is some text.</p>

<input type="button" onclick="demoDisplay()" value="Show">

<script>
function demoDisplay() {
  document.getElementById("myP1").style.cssText = "display:block !important";
}

</script>

</body>
</html>

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

Convert inline javascript into an external function and update the reference to `this`

I'm currently in the process of converting some inline JavaScript code triggered by a button's onclick event to a regular JavaScript function. In my previous implementation, I successfully used the "this" reference to remove a table column. Howe ...

javascriptjquerythis

Enhancing a variable's value while simultaneously boosting its rate of increase through Javascript

Looking to adjust the timing on a number increase function using setInterval(Function, time). Initially set the variable for time as time = 1000, but now looking to dynamically change it by implementing a function triggered by a button click: function cha ...

javascripthtmltimesettimeoutsetinterval

Using JavaScript to create an array from information retrieved from an AJAX

Encountering difficulties in retrieving data from an AJAX file, I am attempting to modify the data source of a web application originally defined in JavaScript as: var ds = [ 'Sarah', 'John', 'Jack', 'Don', 'B ...

javascriptajaxarrays

Utilizing JQuery's printThis Plugin in Combination with the Style Attribute

I am currently working on a JavaScript app and I am trying to implement a button that will allow users to print a specific div. To achieve this, I am utilizing a jQuery plugin called printThis (github link) as well as attempting to use window.print(). $(" ...

javascriptjqueryhtmlcss

How to transform a nested string into a JSON object using JavaScript

I am trying to manipulate a nested query string in JavaScript. The string looks like this: var str = "( ( Sentence starts with any of null AND Sentence starts with any of null ) AND Sentence starts with any of null )" I want to split the string at the &a ...

javascriptjson

What is the process for launching a new terminal within Node.js?

I'm seeking advice on creating a secondary window in my node.js application where I can output text separate from the main application. Imagine having a main window for displaying information and a secondary window specifically for errors that closes ...

javascriptnode.js

Authenticating child in Azure JWT token using the kid value hardcoded

As I obtained an Azure token, I decided to verify it by checking the kid in the header. I decoded the token on jwt.io and hardcoded the kid into my code for future tokens. However, after a few days, the public keys were updated, rendering the previous kid ...

javascriptnode.jsjwtazure-active-directory

Guide on redirecting a server URL to another URL when users access it through a static QR code

Can anyone help me with a dilemma I'm facing? I have static QR codes printed on thousands of boxes that direct to the wrong URL. The designer didn't make the code dynamic, so editing through the generator's interface is not an option. We ar ...

javascriptphpasp.nethttphttp-redirect

Execute a PUT request within a Firebase Cloud Function database handler

I am working on syncing data between my server's database and Firebase realtime db. The first part, which involves syncing from my server to Firebase, is already complete. However, I am facing challenges with the second part - syncing data from Fireba ...

javascriptnode.jsapifirebasegoogle-cloud-functions

What is the best way to add numerous images to a Laravel platform via ajax using pure javascript?

I am currently working on a form where users can upload one or more photos to the server using ajax. Sometimes, users may not upload any photos at all. How can I efficiently send the data from the file input to the server in the background? Below is the r ...

javascriptjsonajaxlaravelfile-upload

Using Three.JS 'OrbitControls' in VueJS application results in a black screen appearing?

Currently, I've been delving into the basic cube exercise on Three.js, and incorporating the three.js cube into my Vue.JS application. Initially, everything was functioning smoothly, with my cube rotating as intended using animate, etc. However, thi ...

javascriptvue.jsthree.jsvuetify.js

Customize numbers in JavaScript with a Unity-inspired design changer

I am currently working on implementing a number input feature that allows users to adjust values by clicking and holding the mouse button while moving the cursor left and right, similar to Unity's editor number adjuster: https://youtu.be/uY9PAcNMu8s?t ...

javascript

Instructions for including packages in .vue files

Within the script section of my .vue file, I have the following code: <script> import get from 'lodash.get'; ... </script> Despite trying to import lodash.get, I keep encountering an error message stating ReferenceError: ge ...

javascriptlaravelvue.jslodash

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

javascripthtmldojo

Using jQuery to redirect a page based on the IP address of the visitor

I am looking to implement Jquery code on the index page of www.propertyhere.com The aim is to redirect visitors based on their geographical IP location to specific pages: if the user's IP is from AU: http://www.propertyhere.com/Country/AU/search-t ...

javascriptjqueryhttp-redirectip

What could be the reason that data-bs-placement="right" is not functioning as expected?

I am facing an issue with the popover functionality in my project. No matter what value I set for data-bs-placement attribute, it does not display correctly. Can you help me understand why this is happening? <!DOCTYPE html> <html lang="en ...

javascripthtmlbootstrap-5

Saving Backbone.js Collection as Text File on HDD & Re-importing Data

After experimenting with Backbone.js for a while, I've relied on localStorage to store most of my app data. However, I now want to explore the possibility of exporting my collection to plain text for easy backup purposes. Essentially, I envision a fea ...

javascriptjsonbackbone.js

What is the method for retrieving hotels from a database based on their proximity to a specific set of latitude and longitude coordinates?

I have a database table with latitude, longitude, and hotel locations. I want to create a feature that will show hotels near a specific point defined by latitude and longitude. Code Snippet function findNearbyHotels() { $this->lo ...

javascriptphpajax

Receive live feedback from shell_exec command as it runs

I have been working on a PHP-scripted web page that takes the filename of a previously uploaded JFFS2 image on the server. The goal is to flash a partition with this image and display the results. Previously, I had used the following code: $tmp = shell_ex ...

phpjavascriptajaxbash

There was an error with CreateListFromArrayLike as it was called on a non-object

I am receiving a list of over 1000 numbers from an API and storing it in a variable called "number". My goal is to find the highest number from this list. However, I encountered an error while attempting to do so: TypeError: CreateListFromArrayLike called ...

javascriptnext.js