• Introducing XDA Computing: Discussion zones for Hardware, Software, and more!    Check it out!

Find On Page / Forward / View Source bookmarklets

Search This thread

GoodDayToDie

Inactive Recognized Developer
Jan 20, 2011
6,066
2,931
Seattle
UPDATE: New incremental search on page ("Next" button)!

So, one thing that has annoyed me about Mango are the changes to IE's user interface. I love the new rendering and JavaScript engines, but the UI is a pain. It wasn't enough to hide away the Tabs and Favorites options; they completely removed the "Find on page" and "Forward" menu options.

However, these can be (somewhat) implemented in JavaScript, and stored as Favorites (sometimes called "bookmarklets") that execute the script instead of navigating to a page. This is the approach that was used for iOS 3 and below, for example (which also lacked Find on Page). It also works on the desktop, incidentally.

Together with XDA member @byobge, I set out to create bookmaklets that would reimplement these features on Mango.

Forward was easy. You can simply create a Favorite from any page, change the Name (I use "! Forward" to help it stand out), and set the Web Address box:
Code:
javascript:history.forward()

Find On Page was a lot trickier. For one thing, it's a more complicated action that doesn't have a built-in JS function like Forward. For another thing, IE on WP7 doesn't support the JS prompt() function, for no discernable reason (Mobile Safari does, which is how their version was implemented). To fix this, we created a pseudo-prompt that puts a highlighted bar with a text box and a button at the top of the current web page view. The actual searching and highlighting code was taken from multiple sources through various attempts to make this work, with the final version being borrowed from Jesse Ruderman’s bookmarklet collection on his blog.
UPDATED VERSION: Now adds incremental searching to the page, so it will auto-scroll you between them using a "Next" button!

Just like Forward, create a Favorite on any page, change the name (I used "! Find On Page"), and change the Web Address (Copy/Paste are your friends; make sure you get all of it!):
Code:
javascript:eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(4(){4 e(s){b B.1z(s)}4 8(s){b B.1r(s)}4 12(){5 o=w.1w;b o==F?p.1v:o}4 Y(){5 o=w.1P;b o==F?p.1I:o}4 z(s){s.1J=\'1p\';s.1m=\'1M\';s.1i=12()+\'14\';s.1h=Y()+\'14\'}4 G(){5 2=e(\'2\'),9=e(\'9\');k(F==2){2=8(\'T\');2.r=\'2\';5 s=2.7,l=8(\'v\');z(s);s.1g=\'1e%\';s.y=\'#1f\';9=8(\'v\');9.r=\'9\';9.t=\'1d\';2.f(9);l.t=\'1k\';l.u=\'1o\';l.H=4(){P(9.u)};2.f(l);p.f(2)}10{2.7.O=\'S\';a=0}}4 P(s){e(\'2\').7.O=\'1l\';k(s===\'\')b;5 n=D(B.R,s.x(),s.Z),m=8(\'v\'),d=8(\'T\'),c=8(\'v\');1c(s+": "+a);2.13.18(2);d.r=\'U\';z(d.7);d.7.O=\'S\';m.t=\'16\';m.u=\'1b\';m.H=4(){N()};d.f(m);c.t=\'16\';c.u=\'1j\';c.H=4(){1L.1K()};d.f(c);p.f(d);i=a-1;N();b n}4 N(){5 s=e("J"+i),Q=-V,M=-V;s.7.y="X";++i;i%=a;s=e("J"+i);s.7.y="1G";1H{Q+=s.1q;M+=s.1R}1Q(s=s.1O);w.1N(Q,M);z(e(\'U\').7)}4 D(6,K,L){5 q,A,g,h,17,E;A=0;k(6.11==3){q=6.1u.x().1t(K);k(q>=0){g=8("1s");g.r="J"+a;g.7.y="X";h=6.15(q);17=h.15(L);E=h.1x(1y);g.f(E);h.13.1D(g,h);++a;A=1}}10{k(6.11==1&&6.I&&6.W.x()!="1A"&&6.W.x!="1B"){1C(5 j=0;j<6.I.Z;++j){j=j+D(6.I[j],K,L)}}}b A}5 a=0,i=0;5 w=1E,C=B;5 p=C.R;5 1a=C.19;G();C.1n(\'1F\')})()',62,116,'||pf||function|var|nd|style|dce|qt|ct|return|||gebi|appendChild|sp|mN|cur|ch|if|sb|nx|||db|pos|id||type|value|input||toUpperCase|backgroundColor|PAT|skip|document|doc|sN|mC|null||onclick|childNodes|fsp|te|len|yo||display||xo|body|inline|div|dv|30|tagName|red|PXO|length|else|nodeType|PYO|parentNode|px|splitText|button|eB|removeChild|documentElement|dde|Next|alert|text|100|FFFF00|width|left|top|Cancel|submit|none|zIndex|execCommand|Find|absolute|offsetLeft|createElement|SPAN|indexOf|data|scrollTop|pageYOffset|cloneNode|true|getElementById|SCRIPT|STYLE|for|replaceChild|window|stop|yellow|do|scrollLeft|position|reload|location|99|scrollTo|offsetParent|pageXOffset|while|offsetTop'.split('|')))

Older version:
Code:
javascript:(function(){function G(){var pf=doc.getElementById('pf');var qt=doc.getElementById('qt');if(null==pf){pf=doc.createElement('div');pf.id='pf';var s=pf.style;s.position='absolute';s.zIndex='99';s.top=(scT||scBT)+'px';s.left=(scL||scBL)+'px';s.width='100%';s.backgroundColor='#FFFF00';pf.appendChild(doc.createTextNode('Search: '));qt=doc.createElement('input');qt.id='qt';qt.type='text';pf.appendChild(qt);var sb=doc.createElement('input');sb.type='button';sb.value='Find';sb.onclick=function(){P(qt.value)};pf.appendChild(sb);doc.body.appendChild(pf);}else{pf.style.display='inline';count=0;}}function P(s){document.getElementById('pf').style.display='none';if(s==='')return;var n=srchNode(document.body,s.toUpperCase(),s.length);alert("Found "+count+" occurrence"+(count==1?"":"s")+" of '"+s+"'.");pf.parentNode.removeChild(pf);return n;}function srchNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="red";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else{if(node.nodeType==1&&node.childNodes&&node.tagName.toUpperCase()!="SCRIPT"&&node.tagName.toUpperCase!="STYLE"){for(var child=0;child<node.childNodes.length;++child){child=child+srchNode(node.childNodes[child],te,len);}}}return skip;}var count=0,scL=0,scT=0,scBL=0,scBT=0;var w=window,doc=document;if(typeof doc.body!='undefined'&&typeof doc.body.scrollLeft!='undefined'){scBL=doc.body.scrollLeft;scBT=doc.body.scrollTop;}if(typeof doc.documentElement!='undefined'&&typeof doc.documentElement.scrollLeft!='undefined'){scL=doc.documentElement.scrollLeft;scT=doc.documentElement.scrollTop;}G();})()

Improvements are totally welcome to this! Neither of us write JS professionally (or at least, I haven't in many years), and there are probably improvements that we haven't even thought of. There are also probably other useful bookmarklets that could be created. Go wild!

New script from @Martin7Pro to view the current page source:
Code:
javascript:h=document.documentElement.outerHTML;document.open("text/plain").write(h).close()
Note that this will "navigate forward" to the source view; you can return to the actual page just by hitting Back. If somebody finds a way to get it to open in a new tab, that would be awesome. window.open() doesn't seem to work as expected on WP7.

From @roqstr, a simple bookmarklet to jump to the top of the page:
Code:
javascript:scroll(0,0)

A few things to keep in mind:
  • Mobile IE doesn't support CSS position:fixed. Thus the shenanigans with figuring out the current view box.
  • Bookmarklets must be kept below 2048 characters in the mobile browser, thus the compacted form. You could definitley compress it further, though (for example, replace "document.getElementById" with a single-character variable).

Features that would be cool:
  • A way to find text that crosses an element boundary. This version only finds matches that occur entirely within a single text element.
  • A way to un-highlight without needing to refresh the page (although, in Mango, the Refresh button *is* sort of right there all the time).

Hope this is useful!

EDIT: Some additional bookmarklets for the phone that may be useful, such as translation and removal of non-mobile-friendly content, can be found here: http://www.1800pocketpc.com/bookmarklets-for-windows-phone/22429/. Thanks @the0ne for the link!

EDIT2: A nice way to get the bookmarklets in an easy-to-copy way is to visit this link on the phone: http://www.1800pocketpc.com/shared_files/Bookmarklets.txt
However, that currently only has the original Find On Page version. Hopefully they'll update with the incremental version soon.
 
Last edited:

clfosk

Senior Member
Feb 25, 2007
102
18
This is awesome stuff. Thanks a lot for your work, I think it will be useful to many of us.

As an alternative, Browser Plus also has the feature to search within a page.
 

GoodDayToDie

Inactive Recognized Developer
Jan 20, 2011
6,066
2,931
Seattle
You're welcome! It was fun putting it together.

Alternative browsers can be very cool, but are somewhat crippled by the lack of a way to set them as the default. I think it is actually possible to change the default browser - the HKEY_CLASSES_ROOT registry hive has configurations for the default open action for the HTTP and HTTPS protocol URIs - but nobody that I've seen has done it yet.
 

contable

Senior Member
Oct 25, 2009
1,755
996
I like the idea, because indeed the IE UI is a pain.
As Marvin_S and snickler are working on a new browser maybe they can add some features....

Sent from my OMNIA7 using XDA Windows Phone 7 App
 

nalgrim

Senior Member
Mar 28, 2011
147
25
Timmins
Well I've discovered after half an hour copy and paste are not my friends....in the xda app I can see the full code on one page not a stupid scrolling box. but in the app I can't copy and paste the whole thing. Needless to say I still dont have find on page. it would be nice to copy the whole code at once

Sent from my Schubert using XDA Windows Phone 7 App
 

clfosk

Senior Member
Feb 25, 2007
102
18
Well I've discovered after half an hour copy and paste are not my friends....in the xda app I can see the full code on one page not a stupid scrolling box. but in the app I can't copy and paste the whole thing. Needless to say I still dont have find on page. it would be nice to copy the whole code at once

Sent from my Schubert using XDA Windows Phone 7 App
Open up this site on your phone and copy it from there...
http://justpaste.it/findwp7
 
Last edited:

nalgrim

Senior Member
Mar 28, 2011
147
25
Timmins
Its ok I just copied it to notepad on a desktop and mailed it to myself. Thanks tho

Sent from my Schubert using XDA Windows Phone 7 App
 

contable

Senior Member
Oct 25, 2009
1,755
996
Here a screenshot of the "Find on page" function...

attachment.php
 

Attachments

  • screenie3.jpg
    screenie3.jpg
    48.9 KB · Views: 534

Ddriver

Senior Member
Mar 28, 2005
400
22
And this one in german lang ;)

Thanks for this solutuion. :)

Code:
  javascript:(function(){function G(){var pf=doc.getElementById('pf');var qt=doc.getElementById('qt');if(null==pf){pf=doc.createElement('div');pf.id='pf';var s=pf.style;s.position='absolute';s.zIndex='99';s.top=(scT||scBT)+'px';s.left=(scL||scBL)+'px';s.width='100%';s.backgroundColor='#FFFF00';pf.appendChild(doc.createTextNode('Suche: '));qt=doc.createElement('input');qt.id='qt';qt.type='text';pf.appendChild(qt);var sb=doc.createElement('input');sb.type='button';sb.value='Finde';sb.onclick=function(){P(qt.value)};pf.appendChild(sb);doc.body.appendChild(pf);}else{pf.style.display='inline';count=0;}}function P(s){document.getElementById('pf').style.display='none';if(s==='')return;var n=srchNode(document.body,s.toUpperCase(),s.length);alert("Gefunden "+count+" Treffer"+(count==1?"":"")+"  'von"+s+"'.");pf.parentNode.removeChild(pf);return n;}function srchNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="red";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else{if(node.nodeType==1&&node.childNodes&&node.tagName.toUpperCase()!="SCRIPT"&&node.tagName.toUpperCase!="STYLE"){for(var child=0;child<node.childNodes.length;++child){child=child+srchNode(node.childNodes[child],te,len);}}}return skip;}var count=0,scL=0,scT=0,scBL=0,scBT=0;var w=window,doc=document;if(typeof doc.body!='undefined'&&typeof doc.body.scrollLeft!='undefined'){scBL=doc.body.scrollLeft;scBT=doc.body.scrollTop;}if(typeof doc.documentElement!='undefined'&&typeof doc.documentElement.scrollLeft!='undefined'){scL=doc.documentElement.scrollLeft;scT=doc.documentElement.scrollTop;}G();})()
 
Last edited:

gentry33

Senior Member
Mar 14, 2011
76
6
Bookmarklets

I also installed bookmarklets TextOnly and Translate. It took a few to get copy and paste to do what it should (fingers to darned big). Nice to have. Thanks.
 

GoodDayToDie

Inactive Recognized Developer
Jan 20, 2011
6,066
2,931
Seattle
No need @contable, the link to them was already posted on the first page. I added it at the bottom of the first post, though; thanks for the suggestion!
 

contable

Senior Member
Oct 25, 2009
1,755
996
Last edited:
  • Like
Reactions: GoodDayToDie

gentry33

Senior Member
Mar 14, 2011
76
6
Translate and TextOnly

I found the code @http://www.1800pocketpc.com/bookmarklets-for-windows-phone/22429/. Enjoy.
 
  • Like
Reactions: contable

Top Liked Posts

  • There are no posts matching your filters.
  • 24
    UPDATE: New incremental search on page ("Next" button)!

    So, one thing that has annoyed me about Mango are the changes to IE's user interface. I love the new rendering and JavaScript engines, but the UI is a pain. It wasn't enough to hide away the Tabs and Favorites options; they completely removed the "Find on page" and "Forward" menu options.

    However, these can be (somewhat) implemented in JavaScript, and stored as Favorites (sometimes called "bookmarklets") that execute the script instead of navigating to a page. This is the approach that was used for iOS 3 and below, for example (which also lacked Find on Page). It also works on the desktop, incidentally.

    Together with XDA member @byobge, I set out to create bookmaklets that would reimplement these features on Mango.

    Forward was easy. You can simply create a Favorite from any page, change the Name (I use "! Forward" to help it stand out), and set the Web Address box:
    Code:
    javascript:history.forward()

    Find On Page was a lot trickier. For one thing, it's a more complicated action that doesn't have a built-in JS function like Forward. For another thing, IE on WP7 doesn't support the JS prompt() function, for no discernable reason (Mobile Safari does, which is how their version was implemented). To fix this, we created a pseudo-prompt that puts a highlighted bar with a text box and a button at the top of the current web page view. The actual searching and highlighting code was taken from multiple sources through various attempts to make this work, with the final version being borrowed from Jesse Ruderman’s bookmarklet collection on his blog.
    UPDATED VERSION: Now adds incremental searching to the page, so it will auto-scroll you between them using a "Next" button!

    Just like Forward, create a Favorite on any page, change the name (I used "! Find On Page"), and change the Web Address (Copy/Paste are your friends; make sure you get all of it!):
    Code:
    javascript:eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(4(){4 e(s){b B.1z(s)}4 8(s){b B.1r(s)}4 12(){5 o=w.1w;b o==F?p.1v:o}4 Y(){5 o=w.1P;b o==F?p.1I:o}4 z(s){s.1J=\'1p\';s.1m=\'1M\';s.1i=12()+\'14\';s.1h=Y()+\'14\'}4 G(){5 2=e(\'2\'),9=e(\'9\');k(F==2){2=8(\'T\');2.r=\'2\';5 s=2.7,l=8(\'v\');z(s);s.1g=\'1e%\';s.y=\'#1f\';9=8(\'v\');9.r=\'9\';9.t=\'1d\';2.f(9);l.t=\'1k\';l.u=\'1o\';l.H=4(){P(9.u)};2.f(l);p.f(2)}10{2.7.O=\'S\';a=0}}4 P(s){e(\'2\').7.O=\'1l\';k(s===\'\')b;5 n=D(B.R,s.x(),s.Z),m=8(\'v\'),d=8(\'T\'),c=8(\'v\');1c(s+": "+a);2.13.18(2);d.r=\'U\';z(d.7);d.7.O=\'S\';m.t=\'16\';m.u=\'1b\';m.H=4(){N()};d.f(m);c.t=\'16\';c.u=\'1j\';c.H=4(){1L.1K()};d.f(c);p.f(d);i=a-1;N();b n}4 N(){5 s=e("J"+i),Q=-V,M=-V;s.7.y="X";++i;i%=a;s=e("J"+i);s.7.y="1G";1H{Q+=s.1q;M+=s.1R}1Q(s=s.1O);w.1N(Q,M);z(e(\'U\').7)}4 D(6,K,L){5 q,A,g,h,17,E;A=0;k(6.11==3){q=6.1u.x().1t(K);k(q>=0){g=8("1s");g.r="J"+a;g.7.y="X";h=6.15(q);17=h.15(L);E=h.1x(1y);g.f(E);h.13.1D(g,h);++a;A=1}}10{k(6.11==1&&6.I&&6.W.x()!="1A"&&6.W.x!="1B"){1C(5 j=0;j<6.I.Z;++j){j=j+D(6.I[j],K,L)}}}b A}5 a=0,i=0;5 w=1E,C=B;5 p=C.R;5 1a=C.19;G();C.1n(\'1F\')})()',62,116,'||pf||function|var|nd|style|dce|qt|ct|return|||gebi|appendChild|sp|mN|cur|ch|if|sb|nx|||db|pos|id||type|value|input||toUpperCase|backgroundColor|PAT|skip|document|doc|sN|mC|null||onclick|childNodes|fsp|te|len|yo||display||xo|body|inline|div|dv|30|tagName|red|PXO|length|else|nodeType|PYO|parentNode|px|splitText|button|eB|removeChild|documentElement|dde|Next|alert|text|100|FFFF00|width|left|top|Cancel|submit|none|zIndex|execCommand|Find|absolute|offsetLeft|createElement|SPAN|indexOf|data|scrollTop|pageYOffset|cloneNode|true|getElementById|SCRIPT|STYLE|for|replaceChild|window|stop|yellow|do|scrollLeft|position|reload|location|99|scrollTo|offsetParent|pageXOffset|while|offsetTop'.split('|')))

    Older version:
    Code:
    javascript:(function(){function G(){var pf=doc.getElementById('pf');var qt=doc.getElementById('qt');if(null==pf){pf=doc.createElement('div');pf.id='pf';var s=pf.style;s.position='absolute';s.zIndex='99';s.top=(scT||scBT)+'px';s.left=(scL||scBL)+'px';s.width='100%';s.backgroundColor='#FFFF00';pf.appendChild(doc.createTextNode('Search: '));qt=doc.createElement('input');qt.id='qt';qt.type='text';pf.appendChild(qt);var sb=doc.createElement('input');sb.type='button';sb.value='Find';sb.onclick=function(){P(qt.value)};pf.appendChild(sb);doc.body.appendChild(pf);}else{pf.style.display='inline';count=0;}}function P(s){document.getElementById('pf').style.display='none';if(s==='')return;var n=srchNode(document.body,s.toUpperCase(),s.length);alert("Found "+count+" occurrence"+(count==1?"":"s")+" of '"+s+"'.");pf.parentNode.removeChild(pf);return n;}function srchNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="red";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else{if(node.nodeType==1&&node.childNodes&&node.tagName.toUpperCase()!="SCRIPT"&&node.tagName.toUpperCase!="STYLE"){for(var child=0;child<node.childNodes.length;++child){child=child+srchNode(node.childNodes[child],te,len);}}}return skip;}var count=0,scL=0,scT=0,scBL=0,scBT=0;var w=window,doc=document;if(typeof doc.body!='undefined'&&typeof doc.body.scrollLeft!='undefined'){scBL=doc.body.scrollLeft;scBT=doc.body.scrollTop;}if(typeof doc.documentElement!='undefined'&&typeof doc.documentElement.scrollLeft!='undefined'){scL=doc.documentElement.scrollLeft;scT=doc.documentElement.scrollTop;}G();})()

    Improvements are totally welcome to this! Neither of us write JS professionally (or at least, I haven't in many years), and there are probably improvements that we haven't even thought of. There are also probably other useful bookmarklets that could be created. Go wild!

    New script from @Martin7Pro to view the current page source:
    Code:
    javascript:h=document.documentElement.outerHTML;document.open("text/plain").write(h).close()
    Note that this will "navigate forward" to the source view; you can return to the actual page just by hitting Back. If somebody finds a way to get it to open in a new tab, that would be awesome. window.open() doesn't seem to work as expected on WP7.

    From @roqstr, a simple bookmarklet to jump to the top of the page:
    Code:
    javascript:scroll(0,0)

    A few things to keep in mind:
    • Mobile IE doesn't support CSS position:fixed. Thus the shenanigans with figuring out the current view box.
    • Bookmarklets must be kept below 2048 characters in the mobile browser, thus the compacted form. You could definitley compress it further, though (for example, replace "document.getElementById" with a single-character variable).

    Features that would be cool:
    • A way to find text that crosses an element boundary. This version only finds matches that occur entirely within a single text element.
    • A way to un-highlight without needing to refresh the page (although, in Mango, the Refresh button *is* sort of right there all the time).

    Hope this is useful!

    EDIT: Some additional bookmarklets for the phone that may be useful, such as translation and removal of non-mobile-friendly content, can be found here: http://www.1800pocketpc.com/bookmarklets-for-windows-phone/22429/. Thanks @the0ne for the link!

    EDIT2: A nice way to get the bookmarklets in an easy-to-copy way is to visit this link on the phone: http://www.1800pocketpc.com/shared_files/Bookmarklets.txt
    However, that currently only has the original Find On Page version. Hopefully they'll update with the incremental version soon.
    1
    No need @contable, the link to them was already posted on the first page. I added it at the bottom of the first post, though; thanks for the suggestion!

    Ok. I saw the link but I didn´t try it. Anyway good to know that 2 more scripts are confirmed to work... Thanks again.


    Edit: Better adding this link to post #1: http://www.1800pocketpc.com/shared_files/Bookmarklets.txt
    1
    Translate and TextOnly

    I found the code @http://www.1800pocketpc.com/bookmarklets-for-windows-phone/22429/. Enjoy.