• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3581
  • Last Modified:

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!
0
Scott Fell,  EE MVE
Asked:
Scott Fell,  EE MVE
  • 5
  • 3
  • 2
  • +1
1 Solution
 
Sar1973Commented:
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>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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.
0
 
Sar1973Commented:
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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.
0
 
Sar1973Commented:
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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!
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
Kyle HamiltonData ScientistCommented:
Btw, you never posted that jpg you mention in your question.
0
 
Michel PlungjanIT ExpertCommented:
The word you were looking for is bookmarklet (I changed your title for you)

What you are asking for does not need a script on your server.
you CAN host a script but you can also just do this, which will send the url and title to your server where you can embed it in a form:

(function() {
  var ifr = document.createElement('iframe');
  document.body.insertBefore(ifr,document.body.firstChild);
  ifr.src='http://www.myserver.com/myformhtml.php?url='+encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title);
})()

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
@ 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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
Sorry it took so long.  I lost track of time...
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now