I'm attempting to invoke the function of a child window from the parent window when a click event occurs. Strangely, this code works in Firefox but not in Safari or Chrome. Here is the code snippet I am using:
var iframeElem = document.getElementById("iframe");
iframeElem.contentWindow.muteVideoSound();
The muteVideoSound function is located in the child window which is loaded in an iframe.
Looking to execute a function within an iframe from the parent window?
Follow this example:
Welcome.html
<!DOCTYPE html>
<html>
<head>
<title>parent window</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("a#update_text_link").click(function(event) {
event.preventDefault();
$("iframe#iframe_id")[0].contentWindow.update_text(); // executing the function
});
});
</script>
</head>
<body>
<p><a href="#" id="update_text_link">Update text in iframe</a></p>
<iframe src="iframe.html" id="iframe_id"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<title>iframe page</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
function update_text() {
$("h1").fadeOut(function () {
$(this).text("Updated text.").fadeIn();
});
}
</script>
</head>
<body>
<h1>Initial text.</h1>
</body>
</html>
Some browsers may not support this setup, especially when running it locally. Consider hosting this on a web server and accessing it through such browsers.
For more details (including legacy browser compatibility), refer to Invoking JavaScript code in an iframe from the parent page.
Need help with setting the background color of a Material-UI Drawer. I tried using the following code but it didn't work: const styles = { paper: { background: "blue" } } After defining the styles, I passed them to the Drawer component like ...
While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...
Currently, I am utilizing the Vimeo API in conjunction with axios and react to access a specific channel. Although my code appears to be properly configured, upon compilation, I encounter the following error: TypeError: Cannot read property 'map&a ...
I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...
Attempting to incorporate the semantic-ui-react table reusable component from the Bit.dev community into my application. The link I am using is: To add this component to your application, use: npm i @bit/semantic-org.semantic-ui-react.table However, when ...
Currently in Vue, I am attempting to create a list based on a specific property within an object. The array being retrieved from the vuex store is structured as follows: const array = [ { name: "British title string" nationality: "British" }, { ...
I have implemented a dropdown feature on focus of an <input type='text'> box in the following manner http://jsfiddle.net/Newtt/7ffdF/ The issue I am facing is with the positioning of the dropdown box. It currently displaces the content of ...
Currently, I am conducting a directive unit test using jasmine. The test is now functional, but I need to find an alternative for $.fn in angularjs since the use of $ is prohibited in my workplace. Code: (function scrollTopEventDirective(application) ...
I am currently working on a React application using TypeScript and integrating JSONPlaceholder for simulating API calls. I have successfully set up everything I need, but I am encountering an issue with re-rendering components that display response data fr ...
Currently facing an issue with Skrollr js. It is functioning perfectly in web browsers and mobile devices. However, there seems to be a problem when tapping on a menu or scrolling down arrow as it does not initiate scrolling. Assistance would be greatly ...
I am facing an issue with two external jQuery files. One file allows me to clone the last row of a table, while the other is supposed to retrieve the id of a select tag based on a class assigned to it. However, the second script only works for the original ...
Is it possible to include an image of a bot on the right side of the embedded message? if (message.includes('help')) { msg.channel.send({ embed: { title: "xxxxxx", color: 3447003, description:"Enter **agjgj** to know ...
Is there a way to create an Add-in using Excel JavaScript API from an existing spreadsheet? When running npm start, it generates a blank workbook. I believe changes need to be made in the Manifest.xml file, as npm start triggers office-addin-debugging star ...
In my quest to encrypt and decrypt data in react-native, I embarked on using the crypto node module by incorporating it into my react native project through browserify. While attempting encryption with the code snippet provided below, an error surfaces sta ...
I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a bas ...
I am encountering an issue with a function that scrolls to a specific element when a button is clicked. Strangely, this functionality works fine on desktop but fails on mobile devices. It successfully scrolls to the correct position only when at the top of ...
For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...
I'm facing an issue with a JavaScript file hosted on a domain called foobar.com. at http://foobar.com/static/js/main.js: $(document).ready(function() { function foobar(bar){ $.ajax({ url: "/site/foo/", ...
In my NextJS project (version 13.2.4), I usually start the app by running: npm run dev But there's a new requirement where I need to check for a specific condition before starting the app. If this condition is not met, the app should exit. The condi ...
Working with Files in TypeScript (Angular 8) has led me to Encode the files in Base64 using the code below: private async convertToBase64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> { const results: Arr ...