I can think of two practical uses of this embedding a Web browser inside a note... If you don't care why but are interested in how, skip to "Part III: the Problem" , below...
Usage I: Bookmark Management
It might somehow point the way to automatically store tagged bookmarks of pages you visit (along with a datestamp, editable description, copy in selected text?) to a new note tagged Bookmark or similar.
Now a long essay on why is this important (to me at least). Read on if you are curious, else skip to "Usage II" , below...
Why?
I do a lot of research online and have needed a better way to manage bookmarks than most browsers offer. I've tried different methods such as creating a folder for the current year on my desktop PC, say "2010" then under it if I'm researching Kangaroo toenails, create a subfolder for that day & subject, in <yyyy/>-<mo/>-<dd/> <description/> format (since I'm good at remembering dates, it sorts nicely & is readable) for example "2010-08-11 kangaroo toenails", then at a given site, drag my browser's address bar to the folder and Windows automatically creates an address shortcut to the page, named using the <title/> tag. If I really want the article offline I can save the HTML or MHT to the folder as well. It's easier to stay organized like this (keep your work files in the same folder, put it on a thumb drive, etc.) What's missing is the links aren't tagged or wikified. Of course you can "tag" them by including the word in the shortcut description but filenames & paths can get prohibitively long/deep and besides all this info would be much more manageable & usable inside a wiki (TiddlyWiki on my desktop, Trunk Notes on my iPhone, and hallelujah when they can seamlessly sync & convert). So as is, to do this I have had to write a little VBA utility inside Excel (or Outlook, Word, etc, take your pick) that reads all Windows shortcuts (the URL, description & date) in a given directory. From there I can enter tags for each in a "tag" column in Excel (my other secret weapon alongside the wiki) and it all can be exported to whatever XML or text file a given wiki can import, by some as-yet-unwritten other utility function, and lo! my Windows bookmarks are (finally) wikified. (Btw there's other reasons I want them in Excel just so you know I'm not crazy!) Anyway, getting my Web research on the iPhone is just as convoluted... I've gotten into a habit of just mailing the URL (and sometimes some or all of the content pasted in) to my gmail account. Gmail lets you create tags and embed those tags in with your email address, so I could create a tag "kangaroo" and if my address is
myname@gmail.com, I can mail a link to
myname+kangaroo@gmail.com and inside gmail, the message will get tagged "kangaroo" (I haven't tried multiple tags, like
myname+kangaroo+toenails@gmail.com but it should work?) The email subject can be a description, including other tag words too. So in gmail you can filter by tags which is cool, but again, this stuff is not inside my wiki. So I can download the emails with Outlook and I wrote some VBA macro to export a given Inbox to text files by whatever filter logic & template to output the file to whatever the given Wiki flavor needed. So it can all end up in the same place, albeit by another clunky & unwieldly process... All this trouble because when I research, I jump around a lot of pages fast and need the quickest easiest way to file info. Also I like having total control of my data fields & want them tagged and in one Wikispace (a utopian vision which my fellow wiki heads surely can dig) whether they come from my work pc, laptop, netbook, home desktop, iPhone, etc. It seems such a simple thing to want: an easy & seamless way to store the Web links you visit, along with a description, datestamp, tags and maybe content, to your Wiki. And this now seems achievable in our lifetimes having a scriptable Web-based platform able to embed a Web browser inside a note (or "tiddler" as they're known in TiddlyWiki)
Usage II: Persisting Form Data In a Note
Until Matthew & Co add support to persist HTML form data inside a note (or to some global name/value pair list), I would find this method handy for embedding Web forms from my own database-enabled Web pages, to allow me to enter & persist data from inside a note. This could be to enter some settings used to drive javascript logic in some other notes or a way to persist variables across notes (so your wiki becomes somewhat of a Web application).
Part III: The Problem
I read up on how to manipulate the content Div using jquery and updated the original example in this thread with that method and it sort of works, only the page is not displaying right, probably because its <head> element conflicts with the parent's head? Here's the note, can anyone figure how to get the page to display properly when inserted into the content div?
[NOTE: I tried similarly updating the more modular WebLoader/WebTemplate version posted above but no luck getting it to work at all.]
Anyhow, let's play with some code... Create a note called Web:Google2 with the following and see what happens:
- Code: Select all
<!--
FROM URL: http://www.appsonthemove.com/forum/viewtopic.php?f=12&t=461
Here's how to have notes that show live web content:
Create a new note called Web:Google and add the
following inside the note:
-->
CODE: SELECT ALL
<html>
<script>
var req;
var page="";
function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try { req = new XMLHttpRequest(); }
catch(e) { req = false; }
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try { req = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e) {
try { req = new ActiveXObject("Microsoft.XMLHTTP");}
catch(e) { req = false; }
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
function processReqChange() {
var page="";
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
page = req.responseText;
// old method rewrites entire page:
/*
document.write("<meta name = \"viewport\" content = \"user-scalable=yes, maximum-scale=2.0, width=320\">");
document.write(page);
*/
// new method just modifies content div with jquery:
$('#contents').html('');
$('#contents').append("<meta name = \"viewport\" content = \"user-scalable=yes, maximum-scale=2.0, width=320\">");
$('#contents').append(page);
} else {
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}
}
loadXMLDoc("http://www.google.com");
</script>
</html>
<!--
Now, when you open this note, it will automatically open the Google web page within TrunkNotes!
Just edit the web address at the end of the note to display any web page.
you can also specify the width of the page (320 by default).
Cheers,
Harry.
-->
