Having trouble selecting a TinyMCE iframe using a JavaScript file

The issue with selecting the TinyMCE iframe using a JS file.

$(document).ready(function() {
    console.log("Connected!!");
    let iframe = document.getElementById("myTextarea_ifr");
    let body = iframe.contentWindow.document.querySelector("#tinymce");

    body.innerHTMl = localStorage["body111"] || '<p><strong>2</strong> PROGRAM CURRICULUM AND TEACHING ­ LEARNING PROCESSES (120) <br><strong>2.1</strong> Program Curriculum (20) <br><strong>2.1.1</strong> State the process used to identify extent of compliance of the University curriculum for attaining the Program Outcomes and Program Specific Outcomes as mentioned in AnnexureI. Also mention the identified curricular gaps, if any <br>Open Seperately (SARUGTireIITemplateRevisedQuestion.aspx?Appid=1660&amp;Progid=558&amp;QuestID=22) <br>(State the process details; also mention identified curricular gaps). <br><strong>Note</strong> : In case all POs are being demonstrably met through University Curriculum then 2.1.2 will not be applicable and the weightage of 2.1.1 will be 20.</p><p><br></p><p><img class="mce-pagebreak" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-mce-resize="false" data-mce-placeholder=""></p><p><br></p><p><strong>2.1.2</strong> State the delivery details of the content beyond the syllabus for the attainment of POs and PSOs (10) Open Seperately (SARUGTireIITemplateRevisedQuestion.aspx?Appid=1660&amp;Progid=558&amp;QuestID=23) <br>(Provide details of the additional course/ learning material/ content/ laboratory experiments/ projects etc., arising from the gaps identified in 2.1.1 in a tabular form in the format given below) <br><strong>Note</strong> : Please mention in detail whether the Institution has giv...
    
    setInterval(function() {
        localStorage["body111"] = body.innerHTMl;
    }, 10);
});

When attempting to select the iframe element within the file using JavaScript, there seems to be an issue. The console returns undefined when running iframe. However, once I run 

let iframe = document.getElementById("myTextarea_ifr");
in the console, iframe is successfully initialized with the iframe object. Despite seeing the message Connected!! in the console, indicating that the file is connected, how can I effectively select the iframe element from within the file?

javascriptiframejquery-selectorstinymcedomdocument

Answer №1

The issue at hand was due to my declaration of iframe and body within the local scope. As a result, once the function finished executing, the variables ceased to exist. To resolve this, I moved the variable declarations outside of the function.

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

My confidential environment variables are being inadvertently revealed to the client by Next.js

I am encountering a problem with my project in which an environment variable is being revealed to the browser. Despite the documentation stating that only environment variables prefixed with NEXT_PUBLIC_ should be accessible in the browser environment, all ...

javascriptnext.js

Is there a method in Node.js Express/Connect to manipulate the session to have an indefinite duration?

This is my current approach: app.use(express.session({ cookie:{domain:"."+settings.c.SITE_DOMAIN}, secret:'abc', store: redis_store, })); Upon checking my redis and running TTL se ...

javascriptsessionnode.jscookies

What is the mechanism by which AngularJS manages all of my module dependencies with jest?

Updated: Since this is an older project, I didn't use any module loader. Instead, I imported all dependencies in my index.html using the script tag. The structure of my AngularJS looks like this: app.js angular.module('app', ['Loca ...

javascriptangularjsunit-testingjestjs

Is it possible to use setInterval in Node.js only while a specific variable remains true?

I am working with a setInterval function and an isRunning variable. Can someone please advise me on how to appropriately stop the setInterval when the isRunning variable is set to false? Thank you in advance for your help! ...

javascriptnode.jstimeoutsetinterval

The functionality of Mongoose async promise appears to be malfunctioning

Struggling with using async in conjunction with mongoose. Here's my code snippet : function() { SchemaOne.findById(fooIdOne).exec().then( x => { // Some initial instructions myCollection.foreach( y => { SchemaTwo.findById ...

javascriptmongodbmongoosemongoose-schema

Transmitting a Custom JS Object via Vue Router

Stuck! I’ve been hitting my head against the wall for hours trying to figure this out... Technologies Utilized: Vue (v3.0.0) Vue-Router (v4.0.0-0) Bootstrap (v5.1.1) The Objective: I have two pages (Home.vue, MetaUpdate.vue) and one component (Docum ...

javascriptvue.jsweb-applicationsvue-routervuejs3

What causes nodejs to exit prematurely without running all the code?

When running the code provided, it randomly prints "DONE" or not. Can you explain why this happens? How can I ensure that it always reaches the console.log("DONE"); line every time? const {Worker, isMainThread, parentPort} = require('node:worker_threa ...

javascriptnode.jspromisev8event-loop

Determining the completion of loading in Android WebView

I am seeking to understand how to accurately determine when a WebView has finished loading in its entirety. To clarify what is meant by "completely": All redirects have been processed The entire page is visibly displayed, with no additional elements lef ...

javascriptandroidwebview

Make sure two elements are siblings in JavaScript / jQuery

Looking at the HTML structure below: <div class="wrap"> <div id="a"></div> <div id="b"></div> </div> A statement is presented as false: ($('#a').parent() == $('#b').parent()); //=> false ...

javascriptjqueryparentsiblings

Is there a way to utilize Javascript to select multiple options and store them in an array?

I'm trying to create an array with selected values in Javascript without using jQuery. I've come across many solutions that involve jQuery, but they don't work with my existing code. Below is the part of my code that's causing trouble: ...

javascriptarrays

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format. Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the ho ...

javascripthtmlcssstyles

What is the fastest way to emulate CSS3 box radius for IE in terms of rendering speed?

There are numerous options available in JavaScript, .htc, and jQuery to create rounded corners for IE 6,7,8. (Not compatible with IE 8) http://code.google.com/p/jquerycurvycorners/ http://code.google.com/p/curvycorners/ Which solution offers the faste ...

javascriptjquerycssxhtmlcross-browser

What is the best way to consistently position a particular row at the bottom of the table in AG-grid?

I have successfully implemented a table using AG-grid. Here is the code snippet: .HTML <ag-grid-angular #agGrid style="width: 100%; height: 100%; font-size: 12px;" class="ag-theme-alpine" [rowData]=&quo ...

javascriptangularag-grid

Did I incorrectly pass headers in SWR?

After taking a break from coding for some time, I'm back to help a friend with a website creation project. However, diving straight into the work, I've encountered an issue with SWR. Challenge The problem I'm facing is related to sending an ...

javascriptnext.jsapi-designswr

Upgrading to Angular 2: Utilizing ElementRef in ES5

Currently, I am facing a challenge in creating an Attribute directive for Angular 2 that would allow me to set multiple default HTML attributes using a single custom attribute. My intention is to apply this directive specifically to the input element. Howe ...

javascriptangular

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

Seeking assistance with transforming the following CodePen example to a Vue.js component: https://codepen.io/kjbrum/pen/qooQJJ While attempting to incorporate this.$nextTick for handling DOM manipulation, I'm encountering challenges in making it func ...

javascriptvue.js

Acquiring a website's dynamic value using jquery

This question is pretty self-explanatory... I am trying to extract a value from a website's source code, but the value I need is dynamically generated using jQuery. Let's use example.com as an example: <div id="currentTime"></div> ...

javascriptphpjquerystringfetch

Using an array as a reference can lead to failure when dealing with asynchronous calls

As I delve into referencing a document in MongoDB, my process involves first creating the document to insert before interfacing with the database itself. Upon initial setup: const venues = [ new Venue({ name: 'A' }), ]; const events = [ new ...

javascriptnode.jsasynchronousmongoose

The attempt to establish a WebSocket connection to 'ws://localhost:4000/graphql' was unsuccessful:

Encountering the Websocket failed to Connect error on both the client and server sides (shown in image below) has left me puzzled for the past 2 days. I have not made any other Websocket configurations apart from the one specified in the apollo client. Any ...

javascriptvue.jswebsocketapollo-server

Struggling to conceal the elusive x button that resets the input field

There is an X box that always appears, which I use to clear the text. However, I would like this X box to only appear when the input has focus and then hide after a word has been entered. Currently, it is visible all the time. https://i.sstatic.net/6Owwi. ...

javascripthtmljquerybootstrap-4