Incorporate JavaScript code into contentWindow

Attempting to utilize a Javascript postMessage function, similar to how it can be done with an iframe, but now with an embed element. The reason for using an embed is due to the bug in IOS devices which causes issues with setting iframe width and height.

While I'm able to perform a postMessage from inside the embed to the parent, I am encountering difficulties posting to the embed itself. Some methods I've tried include:

document.getElementById("embed").contentWindow.postMessage(...)
document.getElementById("embed").contentDocument.postMessage(...)
document.getElementById("embed").document.postMessage(...)
document.getElementById("embed").getSVGDocument()  // returns null

Current embed configuration:

<embed src="URL" id="embed" type="text/html"></embed>

Seeking any possible solutions or alternatives for this issue.

javascript

Answer №1

To locate an element using its Id in JavaScript, you must assign an Id to the element so that the script can identify it:

<div id="example" class="example-class"></div>

If you prefer not to utilize an Id, you can instead use the getElementsByTagName function to target the desired element, as shown below:

//if there is only one element of that type
document.getElementsByTagName("div")[0].doSomething();

//if there are multiple div elements
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
   document.getElementsByTagName("div")[i].doSomething();
}

Regarding the contentWindow property, it appears to be specific to iframes. In this case, you will need to explore other properties or revert back to using iframes. Additional information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting

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

Glitch in Mean App: front-end feature malfunctioning during data storage in mongodb

I am encountering difficulties while working on a MEAN app. I attempted to establish a connection between the backend (Node.js, Express.js) and the frontend (Angular 6), but encountered some issues. The backend port is http://localhost:3000, and the fron ...

javascripthtmlnode.jsangular

Fix issue with nested form in Rails 3.0.9 where remove_fields and add field link functionalities are not functioning properly

I've been watching Ryan Bates' nested_forms episodes 1 & 2 on RailsCasts, successfully implementing the functionality in one project without any issues. However, in a new project using the same reference, the remove and add field functionalit ...

javascriptruby-on-railsnested-forms

Creating a React table with customizable columns and rows using JSON data sources

My query is this: What is the most effective way to dynamically display header names along with their respective rows? Currently, I am employing a basic react table for this purpose. As indicated in the table (2017-8, 2017-9, ....), I have manually entere ...

javascriptreactjsreact-redux

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

I am working with a massive table (8 MBytes) that I need to filter using a small JavaScript application. The process works as follows: Countries Regions Skills I want the user to select one country, one region, and multiple skills as filters. Based on ...

javascriptjsonjquery-mobiledrop-down-menufilter

Unchecking a box becomes impossible in Rails and Ajax due to boolean constraints

Even though I've come across several similar questions, I'm still struggling to make mine work correctly. Here's what my code looks like... #app/views/tasks/index.html.erb <%- @tasks.each do |task| %> <div class="task-wrapper"> ...

javascriptruby-on-railsajax

jquery: conditions fail to execute

Looking at the code snippet provided, it appears quite straightforward. The intention is to display an alert labeled "Trigger 2" if the variable "ret" returns a value of "fail". However, there seems to be a glitch with the IF statement causing it to trigge ...

javascriptjqueryajaxif-statement

Trouble with attaching a click event to a jQuery datepicker

I am attempting to attach a click event to .ui-state-default after a jQuery datepicker has been displayed (I do not have access to the html generating the datepicker so I cannot utilize any datepicker-specific events) and it functions properly using $.bind ...

javascriptjqueryjquery-uidatepicker

JavaScript PIP video feature

Currently, I am utilizing the requestPictureInPicture function to display the HTML video element in a popup window. However, I have encountered an issue where the size is restricted to approximately 920 x 540 when in Picture-in-Picture mode. I am wonderin ...

javascripthtmlreactjs

Header formatting issue when attempting to implement tablesorter plugin

I implemented the widget-scroller and widget column Selector in my table using the table sorter plugin in jQuery. Has anyone encountered a problem like the one shown in this picture? It seems that my table headers do not align with the columns properly an ...

javascriptjquerycsshtml-tabletablesorter

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...

javascripttypescriptvue.jsvuejs2tsx

Acquire by Identifier - Tonic()

Currently, I am in the process of setting up a code example on tonicdev.com for my open-source React component available on Npm. Below is the code snippet that I am attempting to execute (editable live on tonicdev.com here): var React = require('rea ...

javascriptreactjsnpmtonic

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

Is there a way to detect when a user moves the mouse outside of the view-port, even if they are holding down the mouse button (for example, if the mouse is on the browser address bar)? In the code below, I am currently using mouseout and mouseleave to det ...

javascripthtmlcss

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

javascripthtmlreactjs

Steps for integrating an Angular 2 App into Express.js as a view

I am currently working on developing an Angular 2 app that requires data from a script running on the server. To achieve this, I am attempting to integrate my existing Angular app as a view within an express application, similar to the process demonstrated ...

javascriptangularjsnode.jsexpressserver

Is there a way to retrieve a singular value from various select options sharing the same name within a single form?

I am facing an issue with my code where only the value assigned to the last select option panel is being saved in the database table. I need assistance as it was working well initially but for some reason, it's not functioning correctly now. <?php ...

javascriptphphtml

"Identifying Mouse Inactivity in React: A Guide to Detecting When the Mouse

I need to dynamically control the visibility of a button element based on mouse movement. I am able to show the button when the mouse is moving using onMouseMove, but I'm stuck on how to hide it when the mouse stops moving. React doesn't have an ...

javascriptreactjsmouseevent

What could be causing the issue with "class not being recognized as a constructor" error that I am encountering?

When attempting to create an instance from modules in routing, I consistently encountered the error message "class is not a constructor." Below is the code snippet: export class Modules{ modules : object = { masterdata : MasterdataModule, shop : ...

javascriptangulartypescript

Using Vue to cycle through an array of objects, and emphasize the chosen item by clicking on it

I have to display an array of objects in the DOM by using map method. Each item has a @click event listener where I want to highlight it with a CSS class 'hover'. The desired functionality is to mimic a menu system where only the clicked item sho ...

javascriptarraysobjectvue.jsvuejs2

Creating an enum from an associative array for restructuring conditions

Hey everyone, I have a situation where my current condition is working fine, but now I need to convert it into an enum. Unfortunately, the enum doesn't seem to work with my existing condition as mentioned by the team lead. Currently, my condition loo ...

javascriptreactjstypescript

Transmit the document to Django using Ajax

I am encountering an issue when trying to send an image using an AJAX request to Django. Below is the HTML code I am using: <form> <input type="file" id="files" name="image"> </form> Next, here is the corresponding JavaScript code: var ...

javascriptajaxdjango