Determining if a swf file has loaded using JavaScript and swfobject

Here is the code snippet I am working with:

    <head>
    # load js
    <script>
    function graph() {
     swfobject.embedSWF(
     "open-flash-chart.swf", "chart", "400", "180", "9.0.0", "expressInstall.swf",
     {"data-file":"{% url monitor-graph %}"});
        };
    </script></head>

<div id="chart"> </div>
<script>
graph();
</script>

My goal is to trigger the graph function only when the swf file has not been loaded yet. Does anyone have a suggestion on how to achieve this? Thank you!

javascriptswfobject

Answer №1

Utilize SWFObject for embedding the SWF file and then create a callback function to continuously check the PercentLoaded value of the file.

If the value is at 0, the SWF file has not finished loading yet. Once it reaches 100, the SWF file is completely loaded.

Check out this informative tutorial on how to effectively monitor PercentLoaded, which includes code samples for reference.

Answer №2

When using the swfobject callback, it is important to note that success is only indicated if the DOM element was successfully created, not if the SWF file has actually loaded.

According to the swfobject documentation:

Please be aware that success will return as true only if the required minimum Flash player is available and the DOM element for the Flash plugin-in was created. It should be noted that SWFObject cannot determine if the request for the swf file has been fully loaded or not.

Answer №3

When using the embedSWF function, make sure to include a callback function as the last argument. This function will be called once the swf file has been embedded and can handle success or failure scenarios by checking properties of the event object. For more detailed information, refer to the swfobject documentation.

swfobject.embedSWF(
 "open-flash-chart.swf", "chart", "400", "180", "9.0.0", "expressInstall.swf",
 {"data-file":"{% url monitor-graph %}"}, {}, {}, 
   function(e) {
     if(e.success) graph();
   }
 );

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

Developing a React-based UI library that combines both client-side and server-side components: A step-by-step

I'm working on developing a library that will export both server components and client components. The goal is to have it compatible with the Next.js app router, but I've run into a problem. It seems like when I build the library, the client comp ...

javascriptnode.jsreactjstypescriptnext.js

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

javascriptcssangular

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascriptjqueryhtmlgoogle-chrome-extensionweb-applications

Sorry, but we're unable to provide a unique rewrite of text that is an original error message

Trying to fetch data from a MySQL database using Next.js API routes, I encountered the following error: Error: No response returned from the route handler Below is an example of the code being used: import { NextResponse } from "next/server"; impor ...

javascriptnext.js

no such file exists in the directory

My current project involves connecting a javascript file to an html file using the <script> tag. However, upon rendering the html page, I encountered an error in the console indicating that the javascript file could not be located. Here is the struc ...

javascripthtmlnode.js

Tips for adjusting the size of a textarea to perfectly fit within a table cell

I have a textarea displayed within an input in a table, but I am looking to resize it so that it completely fills the table cell up to the borders. Here is the logic: <textarea type="textarea" value="{{data.directRowNo}}" id = " ...

javascripthtmlcssangular

When using Selenium WebDriver to locate an object, an error may occur stating that the result of the xpath expression is "[object Text]" instead of an element as expected

I am currently utilizing Selenium to validate the existence of specific text within a web page. Here is an example of how the HTML appears. <html> <div class="a-content"> <!--!-->==$0 " Text to Locate" <b ...

javascriptseleniumselenium-webdriverxpath

What might be causing res.download to retrieve a zip file that is empty?

Using expressjs for my app development, I have created a service to download files on the client side using res.download(filepath, filename). The following is the code snippet of my service: router.route('/downloadFile').get(function(req,res){ ...

javascriptjqueryexpressdownload

React does not allow objects as a valid child element. This error occurs when an object with keys {nodeType, data, content} is found

I am encountering an issue with displaying content from Contentful on the server component. Everything is functioning correctly with no runtime errors, but I am receiving this specific error message: "Objects are not valid as a React child (found: object w ...

javascriptreactjsnext.jsreact-server-components

Ensure that background elements do not become the focus when using MUI backdrop

Currently, we are implementing screen dimming when a custom dialog is open using MUI backdrop. However, even though the screen is "grayed-out," users can still access the items with the keyboard. In the image below, you can see how I move from "show backd ...

javascriptreactjsmaterial-uifocus

When attempting to print the content inside a Bootstrap modal, the display does not appear but instead a blank page is printed

My goal is to print the text content of a bootstrap modal while leaving space for images blank when clicking the print button located within the modal. Unfortunately, upon clicking the print button, I am only getting a blank page without any content displ ...

javascriptphpjquerybootstrap-4bootstrap-modal

Adding a React function to an external object without using React

Here's a simple issue that I'm facing. I am using React Highcharts Official and I want to import graphOptions from another file for the options attribute on ReactHighcharts. <ReactHighcharts highcharts={Highcharts} options={graphOptions} /> ...

javascriptnode.jsreactjshighchartsreact-highcharts

Send data in JSON format along with an identifier using Jquery AJAX

I am having trouble sending JSON data along with 2 IDs using a jQuery AJAX post. Despite my efforts, I can't seem to get it working. Here is the code snippet in question: try { var surveyID = localStorage.getItem("surveyId"); var userDetails ...

javascriptjqueryajaxcordova

Is it possible to utilize EmberJS or other frameworks without the necessity of setting up its server?

I am in search of a JavaScript framework that offers the following features: MV* Well-structured HTML file as template Fast rendering (possibly using virtual DOM) Ability to combine and be compatible with other plugins or libraries Edit on tablet IDE app ...

javascriptember.jsframeworksclient-sideweb-frontend

How can I retrieve items from an object that are contained within a nested array with a specific value

I am working with a nested array of objects, and I am trying to extract matching items based on a specific value stored in the nested object within these objects, which also contain nested arrays. Example: Sample data: const items = [ { name: & ...

javascriptreactjsecmascript-6

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

The result of combining two JavaScript variables

When I multiply a variable by 2 and assign the value to another variable, why do I get 0? My goal is to toggle the visibility of blocks every time a button is pressed. Oddly enough, it works when I use count++ * 2. For code reference, please refer below: ...

javascriptjqueryvariables

Issue with AngularJS ui-router failing to resolve a service call

I am facing an issue while trying to implement the resolve feature in my ui-router state provider. Here is how I have configured it: app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stat ...

javascriptangularjsserviceresolve

Using JavaScript, generate table rows and cells

Hey there, I'm struggling with formatting my table correctly within the designated section. Currently, it's printing the rows one below the other instead of creating a 'tr' and multiple 'td' elements for each input field. The ...

javascripthtmljson

What is the best way to transmit real-time stdout data from a Node.js server to an AngularJS client?

I am currently facing an issue with a script that runs for a long time and generates output. The script is executed from nodejs using child_process, but I want to be able to send the output as soon as it starts executing without waiting for the script to c ...

javascriptpythonangularjsnode.js