Is there a specification for what happens when a webpage is saved?
I would like to create an html application for editing documents and would like the browser's built-in save/load functions to allow the user to save their work partially through editing, so they can load the web page and continue working.
I'm aware of how to save/load files within javascript itself using objectURLs and file selection inputs, but this seems more elegant.
My current approach is to take all of the important data and store it in a hidden, originally empty, div within the body of the webpage, since this seems to stick around when I save a webpage. My page's onload then searches to see if this hidden div contains useful data (in which case a saved version of the page is being loaded) and puts it into the appropriate variables and textareas.
However, I am unable to determine if this is correct across all specification-compliant browsers: a browser might decide not to save the content of invisible divs.
Testing with Chrome (109), it looks like:
The contents of textareas modified in code are saved
The contents of textareas modified manually are not saved
The contents of input type="text" is not saved in either case
the contents of divs modified or created in code are saved
Testing with Firefox (109), it looks like:
The contents of textareas modified in code are saved
The contents of textareas modified manually are saved
The contents of input type="text" is saved in either case
the contents of divs modified or created in code are saved
Related
I want to make a Chrome extension to classify the people who I am following in the website www.zhihu.com, because this website don't have this function.
when I view the source code of the website, I find my personal data is put in a div that whose id is named data.
So I want to obtain this div. But, when I log this div in the document, it becomes null.
Why does this happen? And how can I get a div that exists in the website's source code but not exists in the document?
It could be several reason: first of all, the view source is not a live representation of the document, it's the source the server has sent to the client. It means, it might be no longer valid. Try to load this in the address bar (of a modern browser, possibly):
data:text,<div>hello</div><script>document.querySelector("div").remove()</script>
And check the view source. The source will contains the div, but if you use the inspector from devtools you will see that the div no longer exists (of course, we removed that by JS).
Another scenario, could be that you're logging from a different frame context: if the web pages contains frames, you might be in a frame context where your div is not present.
I've used TinyMCE for a while, but am now wanting to implement drag-and-drop image upload functionality. (ie where you can drag an image from your local computer into the text editor, resize & reposition it etc, then upload it to the server) I was going to purchase Redactor for this feature, but then I noticed TinyMCE has the paste_data_images option allowing images to be dragged/pasted directly into the editor. This seems to converts it to inline base64 encoded data.
I suspect and have read, that in theory it might be possible to have this value submitted to the server, extract the base64 uris from the Dom, write them to a file, replace the SRC with the path to the newly created file, then submit the text to the database. Has anyone achieved this?
From my initial exploration I've found the issues may be:
Huge images (~100mb) could potentially be pasted into the textbox which could cause problems.
Internet Explorer 11 and Edge browsers both don't
seem to allow dragging of images into the textbox at all.
Has anyone managed to get this working seemlessly?
I have since double checked Redactor and noticed that it also doesn't work with IE and Edge either.
TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
As for the issues you reference...
If a browser does not allow the drag/drop sequence you could look at using a file manager like MoxieManager or elFinder etc. They allow you to upload the image via a UI and have the uploaded image appear in your content in one step.
Image size is always an issue. You could manage this on the server in the image upload handler and return an error if the image is "too large". You could also write your own image handler function and stop the upload altogether if the image is too large.
I have a web page that draws data from several other local (same origin) web pages. I collect the data from these other web pages using XMLHttpRequest. I then use the DOM to parse out the needed data from each page. There is one piece of data that I would like to include in each of the other local pages (i.e., in the DOM for each of the other local pages), however, I don't want that data visible when the web page is viewed. (Visible in the source code is OK, just not in the rendered HTML). I can think of a couple of ways of doing that. However, I am not enammered with any of them. I'm wondering what suggestions others might have. Thanks for any input.
Some options:
The hidden attribute:
All HTML elements may have the hidden content attribute
set. The hidden attribute is a boolean attribute. When
specified on an element, it indicates that the element is not yet, or
is no longer, directly relevant to the page's current state, or that
it is being used to declare content to be reused by other parts of the
page as opposed to being directly accessed by the user. User agents
should not render elements that have the hidden attribute
specified.
The template element
The template element is used to declare fragments of HTML that
can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
Comments
Depending on the semantics, you can choose one or another. Or even combine them:
<template hidden><!-- Hidden data --></template>
As you mentioned to get through AJAX request, it is in your control where to show or not.
Once you get the result through AJAX, you can store in your script to do some manipulation or show in HTML page itself with parent tag as visible false, so that end user cannot see (except Source code viewing).
What's wrong with a simple hidden div?
<div id="hiddenData" style="display:none;">...</div>
To be honest, it seems like the way you are passing around data is kind of a hack already, so I don't see any real need to be fancy.
I need a quick way to get the image URL, just like I would get if I right click on an image and select "Copy Image URL". I'm thinking Applescript, though others have mentioned Javascript.
This needs to be compatible with an Automator workflow and needs to work with Google Chrome, Chromium, and Safari, at a minimum.
More specifics:
I already have an Automator workflow that this will be added to.
The workflow begins with text and images that I have selected on a webpage using the mouse.
The processing of the text is working fine.
I just need a Applescript or Javascript or Shell Script (which I assume are the only outside code that can be added to an Automator workflow) that will grab any and all image URL's within the part of the page selected in step 2.
Images are NOT downloaded. Only the image URL is needed.
The basic logic is this:
Does selected input contain images?
If yes,
get URL of image(s)
pass to the next step
else continue
Any help or ideas appreciated!
OS X Services would be your best bet. Those work with text selections and are supported in most apps (e.g. see the Safari>Services submenu). You can also assign them keyboard shortcuts, which is very handy for repetitive tasks.
Basically, you want to get the selection as web content (i.e. HTML data, not plain text) then extract the URLs from that. You can create services in Automator, which includes various actions for working with web content, so I recommend starting there.
In my html file I have a simple table and a couple of buttons that allow adding/removing rows. If I store that html in popup.html, then every time I close chrome extension the session disappears. That is if I added some rows and put some values to the cells of that table, once I go from my extension, these rows and values disappear when I click on the extension again.
As a solution I saw putting that html to background.html and retrieving that code from popup.js:
// listeners to save/restore document.body
window.addEventListener("unload", function(event) {
chrome.extension.getBackgroundPage().docBody = document.body;
});
window.addEventListener("load", function(event) {
var
docBody = document.body,
lastDocBody = bgPage.docBody;
if (lastDocBody)
docBody.parentElement.replaceChild(document.importNode(lastDocBody,true),
docBody);
});
However, it doesn't output any content of background.html to my extension.
The question is general: I would like to save the last state of my table, no matter if I closed the extension or not. How can I do this?
Or in particular, how can I load/save page from/to background.html and upload its content to popup.js
You will have to use one of the storage APIs provided.
Best one to use is chrome.storage, but you can also use localStorage inside chrome extension pages. See this question for a comparison. You don't need background page for either.
Do note: you cannot store DOM nodes directly in such storage, since the data has to be JSON-serializable, and DOM nodes contain circular references.
So you'll need to store data used to add your rows instead of the rows themselves, and add them again when restoring state. It is a good idea anyway to store "raw" data.