In our current project, we're using HTML 5 localStorage with fall-back to global storage for Firefox and userdata behaviors for IE6/IE7.
The fall-back is provided through a JS script called jStorage.
This worked ok, until we started testing in IE6/IE7, even though it "works", it turns out that there's a restriction in userdata behaviour which locks it down so storage can only be set and read on the same URL or as MSDN puts it "For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store".
Hence if I set a value on one page and then navigate to another, although I'm on the same site, it won't work.
Which for us pretty much renders it unusable as a fall-back for local storage, which is scoped per domain.
Has anyone come across this problem before and found a decent solution?
Any ideas or thoughts will be appreciated.
Remy Sharp's polyfill will do that.
https://gist.github.com/remy/350433
if the problem is to get data across two page in different paths, but in the same domain, you could try one of these (note: i didn't try: i'm just trying to be creative)
Use url rewriting (with an .htaccess) so you can access /path1/page1 and /path2/page2 with a single path-rewritten/page1 and path-rewritten/page2
if you are in /path2/page2 you could load an invisible iframe loading a page in /path1 in which you get the data stored in some data structure that you pass in the parent document.
Since page1 and page2 are - per hypothesys - in the same domain you can make the page1 and iframe communicate each other via javascript.
btw good question.
A theoretical solution would be:
dynamically create a hidden "proxy" iframe accessing a static
document retrieved from a location of your convenience, say
http:/domain/proxy.html
proxy access to the DOM element in the iframe to persist/fetch data
Related
I have been trying to use the window.location.search inside my custom javascript to get the page URL in AMP page but I am getting empty field.
Is there any way/function by which I can get the page URL?
To maintain AMP's performance guarantees, custom JS code runs in a Web Worker, and certain restrictions apply. So you can't act on elements that are outside of the <amp-script> component (Web Worker). In other words, it's virtual DOM. Documentation for <amp-script> component.
Here is a very similar question. Also check these comment posted by #Weston Ruter, that might be a solution for your problem.
Alternatively you can try using PHP instead.
My extension has a content script that captures some info from certain pages and saves them into local storage using the following:
localStorage[myVarName] = value;
If I put the following into my content script, I have no problem retrieving the stored values:
myGottenVariable = localStorage[myVarName];
Elsewhere, my extension creates a new window using
chrome.windows.create({url:LocalURL}}
The newly created window is the main UI for my extension. One of the things I want it to do is retrieve the stored value at "myVarName." However, it is undefined.
I assume that this has to do with how the localstorage is organized. I have an intuition that each extension has its own storage space for local storage and that the created window lacks access to the content script's storage space.
This intuition is confirmed by the fact that I have tried storing content locally from the newly created window, and it has no problem retrieving that content.
My question is, what is the simplest method of achieving my desired result? I get tripped up pretty quickly when dealing with a lot of the chrome extension API stuff: so the ideal option would be as clean and simple as possible. That's why I liked the syntax of:
localStorage[myVarName] = value;
Is there some simple way of modifying this to allow easy access to the desired content? Are both pages actually in the same storage space, but at different places in that directory?
localStorage is isolated per domain, which means if the new window has different domain from the domain where you saved data, you won't get what you saved.
To achieve what you want, you could use chrome.storage. The chrome.storage is shared by background page/content scripts. For your case, you could save data in content scripts and retrieve it in the created window (via content scripts).
chrome.storage.local.set({ key: value });
chrome.storage.local.get(key, function (result) {
console.log(result.key);
});
On a page I have a an iFrame and a swf, I've been trying to use ExternalInterface to pass values from the swf to the iFrame, anyone ever tried this and had any luck? I won't be able to post any code until tomorrow, will update then if needed.
Thanks in adavnce.
Here is a visualization of what I need to accomplish, perhaps if it can't be done the way I said someone will have a suggestion of another way to accomplish this.
Try to target the frame. This should work with one frame on the page or you will have to change the index.
duhFrame = window.frames[0]
targetElement = duhFrame.getElementById('someIframeElement');
If this doesn't work for you then use LocalConnection and put a hidden swf on the iframe file.
LocalConnection is Global to the browser so be aware that if two browser windows are open you will get two iframes connecting on the same name and will get some funky results. So change the connection name via query string and flashvars.
Its a real hackish workaround but it will work.
[EDIT]
One more thing make sure your javascript callback function is getting called as ExternalInterface has major domain issues when running under the file structure and not in a domain(EX: clicking run in the editor ). Try uploading to your server and change your embed code to allow for it. Also dont forget to update your crossdomain.xml(s).
You cannot access iframes from outside of them. These are security reasons, and browsers will and should block such attempts.
I inject javascript code into a page user is currently viewing, on users command this script make DOM changes. At the end of this interaction user might want to save the page so that s/he can view/edit it later. I could remember the DOM changes that user made, But if the original page(at its source) is changed, I will not be able to restore this page for user. That is why I want to send the changed page to my server. I should be able to restore it completely and the page should behave exactly the way it did(including scripts and media).
Additionally I can not store media of users page at my end(resource limitation), so I guess I have to parse and modify all addresses/references/links of media to global URL/URI in various scripts(HTML/CSS/JavaScript).
Now the question is, Is there a library/framework/jquery extension that can help me achieve this objective ?
else, What is the right/professional way to do it ?
Since you are using jQuery you could try $("html").html(); just make sure to add the appropriate <html> tags when you output it again.
$('body').html()
$('head').html()
$('html').html()
Download firebug, and try it in the console window on this page. I am getting what looks like the correct data back.
Have I got It right that you are building some kind of CMS that let's the user edit entire pages (Not just seperate content blocks) in Contenteditable mode?
I would definatly advise looking at a solution like ckeditor/tinymce etc... Because doing it all yourself will be a terrible pain.
The answer from #Sydenam should work fine to save the whole HTML page.
Meanwhile, and this is IMPORTANT, I would recommend you to consider a potential SECURITY ISSUE here. Indeed the user can inject whatever he wants in the DOM and have you saving it, like nasty Javascript functions sending confidential information on a remote server for example.
So, in my perspective, a professional way of doing this would be to dedicate a PART of the DOM only to that usage, let say a <div id='editable_div'> that you can load using a $('#editable_div').load('your_url',parameters, etc...), and save afterward using another AJAX call.
When saving it you can parse this chunk of HTML and make sure nothing nasty is inside with some regexp (like tags).
Hope it helps,
Regards,
I have a file: 1.html and an iframe inside it.
I want to access an element (lets say myelement) which exists in 1.html (outside of iframe) from the iframe.
How can I do that?
I tried:
top.getElementById("myelement")
top.document.getElementById("myelement")
parent.getElementById("myelement")
parent.document.getElementById("myelement")
but it didn't work!!
Communication between an iframe and parent document is not possible for cross-origin resources. It will only work if the iframe and the containing page are from the same host, port and protocol - e.g. http://example.com:80/1.html and http://example.com:80/2.html
For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.
Edit - assuming both resources are from the same origin
In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById
Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.
Demo here, source of outer frame here, source of iframe here.
parent.document Not working
For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.
Communication between an iframe and parent document is not possible
for cross-origin resources
that is in so many ways wrong, i dont even WANT to know where to begin. Of course cross-domain requests and algorith-exchanges have a long history, it is both well documented and working now, one might start JSON-request or even simple XMLHttp-Requests via JQuery, for example, you can even load whole .js-files AND inject them into your code - injecting code in remote sources will of course need an appropriate interface; one may achieve such a thing via communication with the responsible persons, just ask them nicely and maybe they'll cooperate if your project makes sense and has its use.
To answer the question : accessing whole documents would raise the need for transferring it beforehand - i would recommend XML for that purpose because the DOM-tree and XML are nearly interchangeable. Load the tree via .get (.ajax for remote hosts), append it to this and access it just like you want ... sounds easy and if you got some experience it IS easy. If you ever read "cross-domain" and "not possible" in the same sentence again you might as well ignore the poster - there are many people out there who dont know what they're talking about ;-)