How to make a hyperlink that can run a definied JavaScript function on one page from another page?

Question

I'm using a sitemap (table of content) on my blogger blog, like this: http://www.maz.website/p/sitemap.html

and this is its HTML code:

 <div id="bp_toc"><i class="fa fa-refresh fa-spin"></i> Loading Sitemap. Veuillez patienter....</div> <style scoped="" type="text/css"> #bp_toc {background:#2E3639;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:5px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:18px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} #comments {display:none;} </style> <script src="https://6770a43d9448a1047339ff51e9d2b58687f5cbd0.googledrive.com/host/0B77lgpmQaAPPc1RpZWxndlg4eUk" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> 

Don't run code snippet .

Please open the given link, in the 3rd column of the table, as you can see, when you click any category (label) say: Blogger , a JavaScript thing sorts all posts that have the clicked label.. and so on. How to make an external hyperlink (on another page) that can load this sitemap page with a certain label's posts shown on the table not all the posts?

I'm not good at English so I'll rephrase the question:

I want to make a link which do these two tasks when clicked:

• open http://www.maz.website/p/sitemap.html .

• click a certain label (say: Blogger ) on the sitemap table.

hope you understand me.

Answer 1

Krii is right if what you are currently using is anything to go by:

http://www.maz.website/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc contains your data in Javascript

and

https://6770a43d9448a1047339ff51e9d2b58687f5cbd0.googledrive.com/host/0B77lgpmQaAPPc1RpZWxndlg4eUk is the working script which produces the table - it would need to be something similar and I suspect you could use the same script.

You can see it has function filterPosts(filter) { which you could modify the filter for.

See: // get the post labels from the comment entry in the script.

You can see from that that it would be based on the <a href="... created by the script so the link you want would be something like:

  <a href="javascript:filterPosts('Blogger');" title='Click here to select all posts with label "Blogger"'>Blogger</a>

and you would need to put the script in the HTML head on the page where the link is sited:

<script src="https://6770a43d9448a1047339ff51e9d2b58687f5cbd0.googledrive.com/host/0B77lgpmQaAPPc1RpZWxndlg4eUk" type="text/javascript"></script> 

<script src="http://www.maz.website/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

You could put the function call javascript:filterPosts('Blogger') in the body onload event. The page would need the same structure as your other HTML which displays tables.

Hopefully that might get you started - maybe Krii will do a better job though!