Tips for maintaining active javascript content within a WebView while navigating to a different page

When working in a WebView, I have the option to either load JavaScript code using 

view.stringByEvaluatingJavaScriptFromString
or by directly loading it into the JS context retrieved via view.mainFrame.javaScriptContext.

The challenge arises when I navigate to a new URL, whether within the WebView.mainFrame or through JavaScript with methods like setting window.location. In such cases, all previously loaded JavaScript code gets cleared and needs to be reloaded. This becomes problematic especially when navigating in JS code and wanting to seamlessly continue after that. Is there any way to prevent clearing all existing JS code and specifically avoid interrupting current JS operations?

javascriptcocoawebviewstate

Answer №1

After discovering it was impossible to prevent context recreation, I decided to create a standalone JSContext instance and assign a WebView instance as a variable within that context. This setup allows you to execute your JavaScript code in the standalone context while utilizing the WebView for web-related tasks. One drawback of this approach is that direct manipulation of the DOM is not possible. Instead, you must either implement manipulation functions within your context (linked to the WebView instance) or develop an extension for all WebView classes (such as DOMDocument, etc.) to expose their methods to JavaScript. By doing so, you can interact directly with Swift/Obj-C classes.

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

Tailored design - Personalize interlocking elements

I am currently working on a custom theme and I am trying to adjust the font size of Menu items. In order to achieve this, I have identified the following elements in the tree: ul (MuiMenu-list) MuiListItem-root MuiListItemText-root If I want to modify th ...

javascriptcssreactjsmaterial-ui

Laravel Behat testing with JavaScript execution without the need for a designated test environment

Currently, I am working on a Laravel 5 project that utilizes Behat for acceptance testing. Moreover, I have set up this project in a Homestead Vagrant box. One of the pages on my website requires Javascript functionality, and I am utilizing the Selenium2 ...

javascriptphplaravelseleniumbehat

What is the method for acquiring the final shape of a particular type?

Is there a way to locate the last path or circle in a paper so that I can perform additional calculations to add more elements? Currently, calling paper.bottom only retrieves the last element. Is it possible to access shapes of specific types, like bottom. ...

javascriptraphael

What is the best way to convert JavaScript to JSON in Python programming?

I encountered a situation where I have an HTML page that contains a lengthy product list, making it too large for me to upload. The products are stored within the script section of the page, specifically in one variable. Initially, I mistook this data for ...

javascriptpythonhtmljson

Standardize special characters for auto-complete functionality

I am trying to standardize the data in an autocomplete feature by removing all special characters. However, I am unsure how to replace the character "-" with a whitespace. I typically use VCS as my code editor. I attempted using %20 as a replacement, but ...

javascripttypescriptautocomplete

Bovine without Redis to oversee queue operations

Can Bull (used for job management) be implemented without utilizing Redis? Here is a segment of my code: @Injectable() export class MailService { private queue: Bull.Queue; private readonly queueName = 'mail'; constructor() { ...

javascripttypescriptredisnestjs

Creating POST requests using the FormData API

I am trying to pass the username and form_data object to a PHP file using http.post. When I only pass form_data, my picture upload works fine. However, I also want to pass some other information like the username. Can someone please help me with how to p ...

javascriptphpangularjsform-dataangularjs-fileupload

Sending BCrypt hash to a different function

I am having trouble encrypting a password using BCrypt and passing it to another function to store it in the database. An error message saying "ReferenceError: hashedPass is not defined" keeps appearing on write-to-db.js:18 The code below encrypts the pas ...

javascriptnode.jsbcrypt

ERROR: The Search function is not defined and cannot be accessed when the HTMLInputElement event is triggered

I am working on an app that utilizes Marvel's API, and I've been having trouble implementing a search bar in the application. Whenever I attempt to search for a name within this API, the function Search() is showing up as undefined in the HTML. ...

javascripthtmlapifor-looponkeyup

Using Vue.js code on an HTML file is only possible when the necessary CDN is included

Just diving into Vue.js and I've got a header html that doesn't include the cdn link for Vue.js. <nav class="navbar navbar-toggleable-md navbar-inverse"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> ...

javascriptvue.jsvuejs2

How can jQuery iterate through each element's href attribute?

Although the title may be a bit confusing, I am confident that this task is achievable! I have a single button with the id of 'downloadAll' and multiple anchor tags with the class 'link' on my webpage. What I would like to accomplish, ...

javascriptjquery

Troubleshooting Tips: Removing a Specific Line from a Canvas Using Javascript

I need to find a method for removing a specific line without having to clear and redraw it. Learn more about clearing specific lines in Canvas with HTML5 I came across this question where everyone suggested clearing the entire page and redrawing it. Is t ...

javascripthtmlcanvas

What could explain why the event listener functions properly on the initial call but fails on subsequent calls?

Currently, I am working on a bootstrap carousel where the "Previous" button is hidden on the first slide and the "Next" button is hidden on the last slide. Now, I want to disable the next button on the second slide (and eventually all slides with iframe vi ...

javascriptjquery

Issue with Intel XDK: the document.location.href is directing to an incorrect page

Hello Community of Developers, I have been experimenting with different methods but still haven't found a solution. In my project using Intel XDK, whenever I attempt to change the page using location.location.href = "#EndGame" or similar codes in Java ...

javascripthtmlintel-xdk

Why is the content overlapping the slider once it ends?

I have been working on a slider that functions perfectly, however, I am facing an issue where the content of the web-page is overlapping with slides 2-3 of the slider. I do not want to set a fixed height for the slider but still want the content after the ...

javascripthtmlcsssliderposition

Something seems off with the performance of Gulp-filter and it is not

I am struggling with the following piece of code: gulp.src('src/*.*') .pipe(filter(['**', '!**/*.{png,jpg,bmp,jpeg,jpeg2,webp,svg}', '!**/*.{css,less}'])) .pipe(gulp.dest('dev/')); This code is sup ...

javascriptnpmgulpgulp-filter

Using popsicle with Node.js to handle asynchronous operations and promises

Looking for a way to optimize a function that currently makes a single API call, returning a Promise. How can we modify this code to make multiple API calls for different timestamps? The goal is to store the unaggregated data in an object with the timestam ...

javascriptnode.jspromise

tips on displaying a div dynamically in a specific location

Currently, I have implemented HTML textBoxes on my website. However, I am looking to validate these textBoxes using JavaScript. Rather than displaying a traditional alert popup for invalid data input, I would like to show a div next to the specific textBox ...

javascriptjqueryvalidationdynamic

Typescript-powered React component for controlling flow in applications

Utilizing a Control flow component in React allows for rendering based on conditions: The component will display its children if the condition evaluates to true, If the condition is false, it will render null or a specified fallback element. Description ...

javascriptreactjstypescript

Global Variables Evolution as Variables are Assigned

So I'm encountering an issue where running a function and assigning variables to the data seems to be updating my global every time. I've double-checked my code, but I can't seem to pinpoint where the update to the global is coming from. Am ...

javascriptangularjsglobal