Update the iframe whenever a checkbox is selected within a timer

I am working with checkboxes that need to trigger code every second. The code is inside a timer, within an "if" statement that checks if the checkbox is checked. When the checkbox is checked, it should refresh an iframe to display updated content from a website. Each checkbox is associated with a different timer to reset the iframe. However, there seems to be an issue preventing the execution of the code. See below for the code snippet:

if (document.getElementById("1").checked == true) {
  

setTimeout(function () {
  f.src = f.src;
    }, 100);
  }
  if (document.getElementById("2").checked == true) {
  

  setTimeout(function () {
    f.src = f.src;

      }, 5000);
    }

Answer №1

You might want to consider using

iframe.contentWindow.location.reload()
to refresh the iframe.

if (document.getElementById("1").checked) {
  

setTimeout(function () {
  f.contentWindow.location.reload()
    }, 100);
  }

  if (document.getElementById("2").checked ) {
  

  setTimeout(function () {
    f.contentWindow.location.reload()
      }, 5000);
    }

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

An error occurred due to a TypeError: attempting to instantiate a new Clock object, but 'Clock' is undefined and not a constructor

Following an update from react native project version 0.63 to 0.72.4, I encountered an issue related to the material tab ( "@react-navigation/material-top-tabs": "^6.6.5") library. Everything was working fine initially, but now I am facing an error on a sp ...

Sending this over to the window's onscroll function

Is there a way to correctly pass the current element to a function designated for the window.onscroll event? My goal is to activate myFunction() when a specific condition occurs. This condition needs to be checked during onscroll init() { window.on ...

Unique loading animations are assigned to each individual page within the Next.js framework

Is there a way to have unique loading animations for each of my website pages during the loading process? How can I achieve this? I've attempted to put the loading component on the page component directly, but it doesn't seem to work: //Page com ...

Arranging the letters in sequence through regular expressions in PHP

I attempted to use a regular expression in php/javascript to match the order of letters. My task was to find a 4 letter word where the first two letters are in order and the second two letters are also in order, like BCEF. I wanted to accomplish this usin ...

Utilize Material-UI slider components to dynamically manage slider handles

I am trying to dynamically create sliders based on user input and struggling with saving values when they are changed. Below is the code snippet I have implemented so far. The issue I'm facing is that I cannot retrieve the value using event.target.val ...

Is it possible to change XML using Ajax technology?

Is it possible to update a value in an XML file using JavaScript/Ajax? I've managed to access the XML file with Ajax and utilize its values in my script. Now, I want to send any updates made by the script back to the XML file on the server using Ajax ...

Obtaining the id in JavaScript from PHP to display information

This is the code I've written: <textarea id="summernote<?php echo $u->id ?>" name="isi" placeholder="Write here" style="width: 100%; height: 100px !important; font-size: 14px; line-height: 18px; border: ...

How to automatically refresh a page in AngularJS after a POST request

After making a POST request, I attempted to use $state.reload in my controller to refresh the page. However, it is not updating the data on my page after registering the form. I have to manually refresh the page to see the correct data. .controller(' ...

Placing one image over another to create a layered effect

I'm having some difficulty overlaying a logo on top of a background image. In my HTML code, the background image is continuously refreshed to appear like a video stream. The image, dublin-rememberance-floor2, is retrieved from a database using JavaScr ...

Toggle visibility of div based on current business hours, incorporating UTC time

UPDATE I have included a working JSFiddle link, although it appears to not be functioning correctly. https://jsfiddle.net/bill9000/yadk6sja/2/ original question: The code I currently have is designed to show/hide a div based on business hours. Is there a ...

Error: Unable to access 'author' property as it is undefined

Currently, I am in the process of learning how to create my own blog by following a tutorial on Github. The tutorial can be found at https://github.com/adrianhajdin/project_graphql_blog. However, while working with [slug].js to build localhost/3000/post/re ...

Updating values within a JavaScript Object

I am currently working with an object named clients. var clients = {"username" : test, "socket": asdasdkje3sf}; However, I am facing an issue where I want to add more clients. Whenever I try to add a new client using the following method: clients = { ...

React setState issue experienced only on initial click due to API lag

My goal is to develop a web app using the Poke API to display multiple Pokemon. I have added buttons to allow users to "change the page" and switch the API URL to view the next or previous set of Pokemon. However, I'm facing an issue where the buttons ...

Changing the location of an ArcGIS map with a click event in a Vue application

I am attempting to dynamically update a map to display my current location using Vue. I have created an onClick event that updates the props and sends them to my map component. To trigger a re-render of the map component when the data changes, I am utilizi ...

What steps are needed to generate an Observable that contains boolean values?

I am looking to create an Observable that can emit a boolean value and be modified by a function. My attempt was: showModal$ = new Observable<boolean>(); Unfortunately, this approach did not work as expected. What I really need is for showModal$ ...

Stopping a for loop in Javascript until the user submits a form

I'm currently working on an experiment that involves displaying a series of images sequentially and prompting users to identify what each image represents. To achieve this, I've utilized a JavaScript for loop within an HTML file to iterate throug ...

The field "data" is not defined within the type "Response"

My experience with GraphQL mutations has been successful, but I'm encountering difficulties with GraphQL queries. export default interface LoadUsersResponse { users: { nodes:{ id: Number; firstName: String; ...

Having trouble passing the value of this operator in IE 9, even though it functions correctly in IE7 and IE8

Having trouble accessing the attributes of a div tag when passing an object to loadApp() using the this operator. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln ...

Rendering v-html in VueJS requires a delayed binding value that can only be triggered by clicking inside and outside of a textarea control

I'm currently experiencing an issue with a textarea that is bound to a v-model with a specific value. The problem arises when the content of the textarea is changed via JavaScript - the displayed value, represented by {{{value}}}, doesn't update ...

The issue of continuous requests in AngularJS controllers

In my controller, I have a simple function that calculates the number of answers for each question: $scope.countAnswers = function(questionid) { AnswersQueries.getAnswers(questionid, function(answers) { var answersCount = answers.length; return ...