asked on

Create a bookmarklet that frames a page using javascript

I would like to create a bookmarklet very similar to what pintrest does for pinning. I would like to create a bookmarklet that goes to a frame page that detects the current site and page you are on and imports the site and page to a form field on the frame.

I have a sample jpg for what I want to do. Assume you are on a site called mySite.com. Clicking on the bookmark brings up a horizontal frame with a form field containing the site and page name.

I would prefer to have this created in javascript.
Thank you for any input!

Sar1973

What do you mean with "bring up"? You could set an iframe somewhere in your page and make it visible with an onclick event:
<button type="button" onclick="ShowmyFrame()">Show the page!</button>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="C" width="WWW" vertical-align="top" height="HH">
<iframe id="myFrame" src="mySite.html" frameborder="0" scrolling="no" width="WWW" style="height:hhpx"></iframe>
</td>
</tr>
</table>
<script>
function ShowmyFrame() {
      var myFramedPage=document.getElementById("myFrame");
      if (myFramedPage.style.display=="inline") {
            myFramedPage.style.display="none";
      } else {
            myFramedPage.style.display="inline";
      }
}
<script>

Scott Fell

ASKER

Thank you. Maybe this will help. The code on the pintrest bookmark is

javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());

Open in new window

Where http://assets.pinterest.com/js/pinmarklet.js does the work

I want to do something similar where the js file on my site will show up as a frame maybe 100% wide by 100px. The frame will contain a form with a text field that is populated with the current site and page.

Sar1973

1st: add an ...;alert('Hello');... inside the void declaration, so that you're sure that the other called functions work. Do it before and after the "src" call, so that you can check if the attribute is set and effectively the file does not work. Notice that locally the .js files are usually called withouth the path and this may solve the whole trouble.
2nd: what does the numeric random extension after "r?" mean?
3rd: I cannot read the whole .js file you're calling, but I suggest you to take a look to this tutorial in order to see how to set iframe parameters.

Scott Fell

ASKER

Hi Sar1973. This question is not about how to make an iframe. And I am not looking to do exactly what pintrest does. Just to have a form on the frame that is called from a book mark as pintrest does. On the form, there is one field field, the current page and and domain populate the form field. If you are on xyz.com/page3.htm and click the book mark, the frame appears with a form field pre populated with the domain and page you are on. To answer your 2nd question, that is a common practice to prevent caching.

Sar1973

Then use "frameset" instead:
<frameset cols="X%,*,Y%"><frame style="display: none" src="ABC.htm"></frameset>
and make it visible on bookmark click. Is that what intended to do? Or, if you want to make it appear in a new window, use window.open(URL,name,specs,replace) command.
I suggest you to take a look to the tutorial I hyperlinked above.

Scott Fell

ASKER

Maybe I am not explaining this correctly. I am not looking for references on how this could be done. To award points here I am looking for 2 pieces of working code. The js for the bookmark and the js for the frame.

Assume you have a page

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
This is the page you will be on
</body>
</html>

Open in new window

After clicking on a book mark in your browser (that is actually the js I am looking for) the rendered HTML might look like

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<iframe id="theframe" src="http://mysite.com/frame.html" style="width:100%; position:static; margin-top:0px; margin-left:0px; height:100px; z-index:9999999999999999999"></iframe>
This is the page you will be on
</body>
</html>

Open in new window

Where the frame.html could be

<form name="form1" method="post" action="">
  <input name="page" type="text" id="page" placeholder="domain.com/somepage.html populated here" size="50"> 
  The domain and page will be populated in the text box domain.com/page.html
</form>

Open in new window

However, instead of using html, the bookmark is javascript similar to

javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());

Open in new window

and there is no frame.html. Instead it is a javascript file that sites on mysite.com/frame.js. The frame.js file is called from the bookmark javascript and contains code for a form with an text input. The text input is prepopulated with the domain and page of the page from which it was called.

I can figure out the rest of what I need from there. I am very comfortable with html so no need for outside references. I am just looking for the 2 pieces of javascript. 1)Bookmark 2)js that will sit on my own site and generate the frame and code to populate the form field with the site and page site.com/page.html from the page the user was on.

Thank you for your time and effort!

Kyle Hamilton

What do you want to see inside the text box? Source code? 'Cause you can't put the actual page with HTML tags and all inside a text box. It won't render.

For source code: here is what I would do:

1. Create iframe on bookmark button click.:
2. Create textarea with innerHTML inside iframe
3. Do Ajax request for current page (location.href)
4. Stringify the response
5. Set value of textarea with result from #4.
6. Append iframe to body.

This is a very generalized answer I know. If I get time I'll write the actual script. This not a trivial couple lines of code.

Kyle Hamilton

Btw, you never posted that jpg you mention in your question.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

ASKER

@ kozaiwaniec I have the mock up image on another computer. This jsbin is the idea where the red is a frame or modal that sites on my site. http://jsbin.com/ayabeq/1/

@mplungjan Thank you! I think what you have is what I am looking for and will give it a try in a few hours. I do need to host the file on my server because there will be some server side functions before the page loads and after form processing.

Right now, I am just trying to keep this sample to the very basic and I should be able to build what I need from your input.

Thank you!
Padas

Scott Fell

ASKER

Sorry it took so long. I lost track of time...