Develop Reference

is there a way to change elements of a page before opening it

I have designed a page to be used as a tool. I am getting some challenges here since my experience is very little in the field and im only new.
- my goal is to change values of an element on a page that is not open yet.
- is there a function i can make on current page to change the values of the element on the next page to preset it to some static numbers or some of them are dynamic
I dont know how to manipulate something that is not open yet, i dont even know if that's something possible. I was able to change elements on my open current page, but dont know how to change something on the next page if i click on one of the links
Park Property Management
Millgate Manor
Weston Towers
Kingston
Region Of Peel
so i expect to click on one of the links and when the link opens some elements in the links i need them to be filled with some values that are static always

You can't directly influence the content of another page with JavaScript in the current page. That would have very big security concerns.
However, you could indirectly influence the content if you have access to the source for both pages, and can add JavaScript to both of them. Then, as some comments suggested, you can for example use search paramaters in the link url to pass along information.
(Search parameters are the stuff that comes at the end of a url sometimes and looks something like ?name=john&id=555)
You can read more about about working with search parameters in JavaScript here:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Don't get discouraged! You're capabilities will grow as you try to make things work. (That's almost the only time they will grow.)
A word of caution!
Please be very careful when using search parameters to modify or display content on a page as there are some real security concerns involved. Never display anything from the search parameters directly on the page without validating the input first. A good way to handle dynamic content based on search parameters, at least if you know the possible options available, is to have some if .. else statements or maybe a switch block that you try to match the search parameters against, and simply not display anything at all if the content of the parameter does not match any input that you're expecting.

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.

Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

JS Challenge: Load changed text into the DOM on page reload

I'm working on a JS chrome extension that allows the user to modify text on any web page. The challenge is that when the user visits the web page again, he/she should see the modified text rather than the original page's text. Let's assume the user can only modify paragraph elements (p)
In another words, on page load, the extension needs to scan the document - find the matching text and modify it.
This is a challenging problem because:
- In between visits, the page could change
- There could be any number of text occurrences. For example, the string "I am a ninja" could appear 10 times in a page.
- Other extensions could modify the DOM as well (who knows what extensions the user have installed).
- This needs to work on ANY WEB PAGE
On a subsequent page visit, when the user needs to see his/her modified text - how would you go about determining what text to modify? Right now I'm doing simple string matching which is far from ideal.
Ideally, I will have a function which scans each element in the document and return a percentage degree of certainty (0 - 1) of the likelihood that this is the element the user modified.
FOOTNOTE:
I realize that there will be instances where the page will be modified completely and it will be impossible to find the element but, I'm not interested int those instances - In those cases, I will render those differently.

Simply thinking it over, I came up with this (yet not complete solution):
Whenever the user selects the text to modify, right clicks and calls your extension, what you should do is:
Use Selection and Range objects to get the nearest proper node (having class and id) (if none present, then simply the nearest node) in which the range is present. I assume that the marked text cannot be within textarea or input element. Then, get the offset of the selected text. Grab details of that nearest proper node i.e. class and id.
Store this all data into the synced or local quota storage and then use this data to remodify the text next time the user visits the page.
Note that this assumes that these proper nodes would not be modified at later point of time. Like, if I mark some text in this answer, then delete some other part of the answer, which makes this texts offset shift left, then the above solution would not work.

How to uniquely identify a webpage in javascript not using the URL

I have a bit of an interesting situation.
I have an application that uses an MVC framework to deliver the view to the user.
This is great for the overall design perspective.
There is a wrinkle though.
At certain times a user could be doing something on a page and they would be required to go to another page to perform a look-up service. I need to be able to uniquely identify each page that they go to and I am not able to use the URL, because all the subsequent pages that I visit from the parent page have the same URL.
Just an fyi, I care about this because I'm attempting to store the last known scrolling position on each page in cookies.
Example -
They are working on Page A.
They click a link from A and they are taken to page B.
On Page B they enter some values and click Search which will query a DB
A list of results is returned.
They can then select to "Return Value" of one of those search results.
The value is then returned to Page A.
When I run the following on each page (A and B) -
alert("${channelUrl}");
They are an exact match!
What else can I do to determine what page I am on within my javascript without resorting doing any sort of server side AJAX calls etc...?
Is what I am asking even possible?
Currently I am attempting to solve this problem by counting up the number of text fields on the page and appending that to my cookie name. This is not ideal, especially if a user visits a page that happens to have the same number of text fields.
Thanks.

One common way to handle this sort of thing is to open the second page in a new window. With this approach the parent and child windows know which is which (the child refers to parent as window.opener, and the parent refers to the child via the return value of the open call) so there's no need to manage URLs or anything to keep track.

People often use the part of the url after # to keep track of where you are under the a single URL. This is built-in supported with My Section which takes you to the element with id "my-section", but you can use libraries that take control of this section of the URL in other ways.

link tag calling js function don't work

I have a static site with classic menu like: home, services, contact etc links.
What I'm trying to do is reducing the site's size.
So, instead of using multiple pages for links (like home.html, services.html) I'm trying to keep only one page and then (when clicking occurs) dynamically change content.
html code (sample):
contact
<h1>old text</h1>
js code:
function ContactClick() {
$('h1').html('new text to change, but it doesnt work, yay!');
}
Something funny happens. If I click on the link, 'old text' becomes indeed 'new text', BUT ONLY FOR 1 SECOND! And then, it changes right back to 'old text'!
I have tryied calling like this: <a href="javascript:ContactClick();"> and it works just fine, but still I need to refresh the page when click event occurs (I have some color changing stuff on site, lol).
Is there another way to reduce site's size, or my idea is just fine?
OR
Is there a solve including refreshing the site and calling the js junction from link?

Perhaps you shouldn't be reloading the page in your href.

You do not need to reduce the site's size. Static pages that contain only text are small and load in a fraction of a second even at the first time. After that, they will be in cache and load instantly.
On the other hand, if you put all the text in one page, plus add some javascript code, the result is not smaller but bigger than the static pages.
Further, you should remember that javascript does not always work. For example, many people disable javascript for security reasons or to avoid irritating advertisements. Therefore, navigation should never be dependent on javascript. At the very least, you should have noscript part that works with static pages in case javascript is disabled. (But this will make the page even bigger.)