Ways to automatically refresh a page within an iframe after a specified amount of time

How can I refresh a page in an iFrame after a specified number of seconds (greater than 5)?

Here is the code snippet I am currently using: 

<iframe sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts" class="iframe" ng-show="$ctrl.getFrameURL() !== 'Default URL'" ng-src="{{$ctrl.getFrameURL()}}" width="100%" height="100%" scrolling="yes" frameBorder="0" id="remotePageFrame"></iframe>

I have looked into solutions on StackOverflow where users suggested refreshing the page by updating the scope. However, I do not want to update the scope as the URL value in the scope variable remains the same. Is there a JavaScript or AngularJs solution to refresh the page in an iFrame without updating the scope?

Update-1

The solution proposed by @sarvon ks works for pages hosted within my project, but it throws an error when trying to refresh external/third-party pages. This occurs because when looping over iFrames to open multiple pages, most of them are external pages. Refreshing external pages results in an Uncaught SecurityError exception.

-- Uncaught SecurityError: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.

This issue is extensively discussed in an existing thread. Are there any alternative workarounds to refresh a page in an iFrame?

javascriptangularjsiframe

Answer №1

Make sure to test out this code as it is guaranteed to function correctly


    var time = 100;
    function updateFrame() {
          var elem = document.getElementsByTagName("iframe");
            elem[0].contentWindow.location.reload();
    }

    setInterval(updateFrame,time);


    <iframe src="https://www.google.com"></iframe>

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 unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Ever since June 12, 2012 at 11:20 TU, I have been noticing strange errors in my varnish/apache logs. At times, after a user has requested a page, I observe a similar request moments later but with the URL string after the last "/" being replaced by "undef ...

javascriptbrowser

Is it possible for a d3 chart to render twice in one area if it's rendered in two different places?

When attempting to showcase two distinct d3 pie charts on my webpage within individual mat-cards, they both end up displaying in the svg tag of the first d3 chart in my code. This is what my code looks like: <section class="three"> <! ...

javascriptangulard3.js

The resolution of deferred actions is not as successful as foreseen

In my code, I have a method that queries documentdb for a specific document and returns the results to the caller. fetch: function(query) { var fetchDeferred = q.defer(); client.queryDocuments(collectionLink, query).toArray(function(err, docs) { ...

javascriptangularjsnpmazure-cosmosdb

Invoking the callback function within the containing scope in Typescript

I am facing an issue with my Angular component where I have a class that includes common services and functions. While passing some functions as callbacks, the scope is getting lost during execution. Let me demonstrate the problem through the code below: @ ...

javascriptangulartypescriptangular10

Anchor element not displaying Bootstrap popover upon focus trigger

I'm exploring ways to implement bootstrap popovers that respond to both click and hover events without relying on jQuery. I have a variety of controls on my page and I want to bind popovers to them using JavaScript. While testing with buttons and anc ...

javascripttwitter-bootstrapbootstrap-5popoverbootstrap-popover

Implementing a local storage cookie service with spaces separating each word

Setting the cookie works without issues, but when I set the cookie name as "Cookie Code 1", it gets saved as "cookie%20code%201". How can I resolve this problem with spaces between words? self.cookie=function(){ localStorageService.cookie.set("Cook ...

angularjscookies

Expandable List using AngularJS with ng-repeat and ng-show

I'm facing an issue with the ng-show index. What I need is to update the ng-show index dynamically in AngularJS. For instance: <div class="row" ng-repeat="list1 in Items track by index"> <button ng-click="vm.showLoc($index)"> ...

angularjs

Inquiries regarding the vuex dynamic registration module result in a complete refresh of all Vue components

When trying to create a new Vue component, I encounter the issue of having to call store.registerModule() before creation. However, this action results in all existing Vue components being destroyed and recreated. The same issue happens when using store. ...

javascriptvue.jsvuex

Autocomplete feature integrated within search bar

I'm currently experimenting with merging MUI autocomplete and MUI searchbar to create a Searchbar that provides suggestions. I have attempted the following: https://codesandbox.io/s/material-demo-forked-cthpv import React from "react"; impo ...

javascriptreactjsmaterial-ui

What are the best practices for incorporating React state into a dynamic filter component?

I am working on a filter component that will help me display specific data to the DOM based on user-selected filters. However, I am facing a dilemma regarding how to maintain state without resetting the filter input and how to render the filtered data with ...

javascriptreactjsuse-state

How can I access the result of a getJSON promise within the $.when method?

I am working on a piece of code where I aim to collect data from 2 getjson calls and store it in an array only when both calls have successfully completed. However, I encountered the following error: resultFromUrl1.feed is undefined var entry1 = resultFro ...

javascriptajax

featherlight.js - Execute code when modal is triggered

Situation with HTML <div id="form-lightbox"> <div class="form"> <div id="ajaxreplace"> <script type="text/javascript"> jQuery(function() { jQuery.ajaxReplace({ //parame ...

javascriptajaxfeatherlight.js

Verify if function is returning sessionStorage using jest

Recently, I've been working on creating a jest test for the function below that sets a sessionStorage entry: /** * @desc create authenticated user session * @param {String} [email=''] * @param {Date} [expires=Date.now()] * @param {St ...

javascriptreactjstestingjestjs

bespoke theme background hue

I currently have material-ui@next installed and I am attempting to customize the background color of the theme. Here is what I have tried: const customizedTheme = createMuiTheme({ palette: createPalette({ type: 'light', primary: purple ...

javascriptreactjsthemesbackground-colormaterial-ui

Transform jQuery UI Slider input into clickable links

Is there a way to turn the jQuery slider values into clickable links? For example, if the slider is at 1920, can it redirect the user to another page? I've included the code in a fiddle: http://jsfiddle.net/up6Bx/ Any assistance would be greatly app ...

javascriptjqueryuser-interfacehyperlinkslider

Managing cookies in PHP and JavaScript can present challenges due to variations in how different browsers

Our website utilizes ExpressionEngine as the CMS and Magento's cart for e-commerce. I am encountering challenges with cookies and their accessibility in various sections. A cookie is used for storing search selections, allowing users to return to our ...

phpjavascriptcookies

Omit the <span> tag when exporting to XLS format

Currently, I have a functioning jQuery DataTable that utilizes the TableTools plug-in and includes <span> elements in one of the columns for each row. When clicking on the export button, my goal is to exclude or hide the <span> elements from t ...

javascriptjquerydatatablestabletools

Asynchronous task during stream processing

Can anyone assist me? I am looking to read a file as a stream and when processing the initial chunk, I need to create a database table in an async manner. To achieve this, I want to develop a duplex/transformer stream that would be responsible for creatin ...

javascriptnode.jsstream

What is the correct way to dynamically switch between RTL and LTR in React with Material UI?

I recently learned that in order to support right-to-left (RTL) languages with Material UI, you need to follow these steps. I have a select input that allows users to switch between languages, changing the overall direction of the app. The core of my appl ...

javascriptreactjsmaterial-ui

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

import { EmailTemplate } from "@/components/email-template"; import { Resend } from "resend"; const resend = new Resend("myApiKey"); // this works only in dev // const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KE ...

javascriptreactjstypescriptnext.jsresend.com