Develop Reference

With offline file:/// protocol, I'm trying to store data in local storage through an iframe. How can I make this work, or is there a better way?

Background
In our company, we install our offline documentation topics (thousands of .htm files in a folder) on our users' computers. Users view our documentation offline through their browser using the file:/// protocol.
I have a banner that appears in the footer of each .htm file that asks users to decide whether we can track user analytics (via Application Insights). Once they make their choice, we don't show the banner.
My Goal and Overall Problem
My goal is to store their choice in the browser's local storage. I can do that just fine, but the problem is this:
These are offline .htm files. There is no website domain. So, the key and value for any local storage is stored only for the .htm file they are on at the time they make their choice. If they come back to a topic they made their choice on, then yes, my script can retrieve their choice. But if they navigate to another topic in our documentation system (another .htm file), the local storage key and value don't persist to those other topics, and my script doesn't know what they chose--so then the banner pops up again.
My Workaround Idea
I doubt this is the best approach, but not having a lot of experience and not knowing what else to try, necessity becomes the mother of invention.
Here's what I'm trying:
Have my local storage requests go through a single .htm file called storage.htm, thereby getting around the above problem by always having a single point of contact (storage.htm) with the local storage.
storage.htm loads via a blank iframe.
The iframe is tacked onto each .htm topic.
When a topic .htm loads, the iframe also loads and any functions inside it become (hopefully) available for use by my main script.
When users click on the banner, I send the choice as query parameters through my main script to the iframe's src.
storage.htm contains a parseQuery() function, and inside that function, it parses any query params and then does the actual localStorage.getValue(key) and localStorage.setValue(key,value) requests.
I then want to somehow force the iframe to refresh with those parameters and then call the parseQuery() function there from my main script.
My Code
From my main script:
Attempt 1:
I've tried the top-voted item from this thread,
How to check if iframe is loaded or it has a content?
but I get stuck inside the checkIfFrameLoaded() function, and it continues to loop through the check to see if the iframe is loaded. It never loads. I think it's because the contentWindow and/or contentDocument don't work with my offline files, so I won't bore you with that code.
Attempt 2:
This is what I'd like to do as it seems cleaner:
function doIframeStorage(type,key,value){
// We get a handle on the iframe's id of 'storage'.
let storage = document.querySelector('#storage');
const src = storage.getAttribute('src');
let query = src;
if (type==='get'){
query = src + `?type=${type}&key=${key}`;
} else if (type==='set'){
query = src + `?type=${type}&key=${key}&value=${value}`;
}
storage.src = query;
storage.addEventListener('load', (e) => parseQuery());
}
But I'm running into a problem where my parseQuery() function (from storage.htm) is always undefined:
Uncaught ReferenceError: parseQuery is not defined
Is it possible to load and access my parseQuery() function from my main script like I'm doing? If so, how? I thought the addEventListener would ensure it was loaded and therefore the parseQuery() function would then be available.
Or Is there a better way to do what I'm attempting?

Angularjs not recognising URL [duplicate]

I have created a JS file that I place in some webpages other than mine.
So mine is domain-1.com and I place this to domain-2.com and domain-3.com
This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.
I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.
How to do this?
I only provide them with a JS external link. It is ok If I place an iframe also.

The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.
The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.
You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.
Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;
function storeItem(key, value) {
var message = {key: key, value: value};
storageScriptWindow.postMessage(message, target);
}
// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {
storeItem("foo", "bar");
};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html';
</script>
Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.
At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.
If you don't need to interact with the main window, you can move the script that reads values into the iframe.
If you do need to get the value on the main window, use postMessage again to send values back.
The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).
Cross Domain Local Storage looks good and easy to use
localStorage-tools is another library for this task
For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

Get page source of external URL and manipulate with javascript/jquery

I'd like to somehow get the page source of an external URL, and with that, be able to get the contents of an h1 element.
For example, this is the logic:
var url = "http://example.com";
var src = // page src of url
// instead of document, it would use the variable src
var headerText = document.getElementsByTagName("h1")[0].innerHTML;
alert(headerText);
I know I can get stuff with curl/php, but have heard larger sites will cause server strain. I'd prefer to keep this as efficient as possible. Not really sure where to start.

This cannot be done, by policy.
In Web pages, JavaScript (and client-side scripts in general) aren't allowed to access raw external resources from a different domain, in general.
The closest you're going to get is using AJAX (jQuery helps) to access a resource, but you (in general) need to be requesting a URL under the same domain.

How to create localStorage for the same domain with www. at the same time or at the next visit?

I have created a JS file that I place in some webpages other than mine.
So mine is domain-1.com and I place this to domain-2.com and domain-3.com
This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.
I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.
How to do this?
I only provide them with a JS external link. It is ok If I place an iframe also.

The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.
The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.
You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.
Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;
function storeItem(key, value) {
var message = {key: key, value: value};
storageScriptWindow.postMessage(message, target);
}
// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {
storeItem("foo", "bar");
};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html';
</script>
Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.
At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.
If you don't need to interact with the main window, you can move the script that reads values into the iframe.
If you do need to get the value on the main window, use postMessage again to send values back.
The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).
Cross Domain Local Storage looks good and easy to use
localStorage-tools is another library for this task
For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

Why don't other sites/services see my hash URLs?

My site has all dynamically loaded content.
I have written a few JS functions that change the content based on the URL received. If someone goes to www.mysite.com/#1056, the content for that will be loaded.
function getLocationHash() {
//check if there is a location hash in the address bar, get that URL
if (window.location.hash != '') {
processURL()
}
}
Then it calls the processURL function
function processURL() {
if (window.location.hash != '') {
urlHash = window.location.hash;
//if it's a catalog item, it has a number above #1000
if (urlHash > 10000) {
getDetail(urlHash);
}
This works fine for history or jumping right to a URL on the site - however, other sites cannot follow this. For instance, if I enter www.mysite.com/#1056 into Facebook status, FB scrapes only www.mysite.com index page. It does not follow through to the end of the JS. Is this because the JS is looking for the 'window' property?
Same thing with Google crawling. I set up a sitemap with all of the hashed URLs but Google only crawls the index page.
So the question is: How do I take what I have here and properly format a URL that other services like Facebook and Google can "see"?
Any tips would be much appreciated.

The # indicates the start of the fragment identifier. It is how you link to part of a page.
It is frequently abused to be read by JavaScript to load different content via Ajax, but that only works if the client runs the JS.
The scrapers used by Google and Facebook don't run JS.
Stop using fragment identifiers to load content
Use real URLs instead
Have the server deliver complete pages for those URLs
Apply your Ajax changes using the history API to update the URI to match the one that would load the page you are creating with JS directly

These are the solutions i discovered when i researched this.
For crawling there is the 'hashbang' , as described in the google pages.https://developers.google.com/webmasters/ajax-crawling/docs/learn-more?hl=nl
And for the linking on facebook you can for example use html5 pushstate.
http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate