简体   繁体   中英

Trying to add the title tag to a mailto link, with the URL in the body

I am creating a help site for our product. It will be deployed by our customer services group on the web (for logged in customers), and it will be deployed with our software. We wanted to create a feedback mechanism, but we can't use a server-side script, since in some cases, users will be viewing the help site locally.

We are working on a long term solution, but for now we are trying to do this with a simple <a href="mailto"> link (which we've formatted to look like a button):

<p class="docfeedback"><a href="mailto:example@example.com?subject=Documentation Feedback" title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: example@example.com>

What I want is to get the value of the <title> element and put that in the Subject, and I'd like to get the url pathname (pathname only) in the body line.

I've read several answers that give me part of the solution, but I'm hoping to put it all together, and coded the right way.

I've been reading about using javascript to get the URL , which I was able to do successfully in the body of the message. But then I tried to use this answer to put the first H1 in the topic as the subject of the message. I then changed it to get the title element. (My project has access to jquery [1.8.3] automatically, so I don't have to specifically call it.)

So, that worked, but I am not sure how to put them both together. Here is the current code in my HTML.

<script>
  $(document).ready(function(){
  var mailtoHref = $('#mailme a').attr('href'); //get href
  var h1Text = $('title').text(); //get h1 text
  $('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
  });
</script>
<div id="mailme">
  <p class="docfeedback">
    <a href="mailto:example@example.com?subject=Documentation Feedback for topic: " title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: example@example.com">Send us documentation feedback</a>
  </p>
</div>

 p.docfeedback /* only used on master page for feedback link */ { text-align: center; font: bold 11px Arial; text-decoration: none !important; background-color: #EEEEEE; padding: 5px 9px 5px 9px; border: 1px solid #CCCCCC; border-radius: 10px; width: 225px; } p.docfeedback a:link, p.docfeedback a:visited, p.docfeedback a:hover, p.docfeedback a:active { color: #666; text-decoration: none !important; } 
 <head> <title>This is the name of the document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <script>/* <![CDATA[ */ $(document).ready(function(){ var mailtoHref = $('#mailme a').attr('href'); //get href var h1Text = $('title').text(); //get h1 text $('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto:// }); /* ]]> */</script> <div id="mailme"> <p class="docfeedback"><a href="mailto:example@example.com?subject=Documentation Feedback for topic: " title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: example@example.com">Send us documentation feedback</a> </p> </div> 

Any help you can provide, I would greatly appreciate.

jQuery for adding current url to body of email is below

 $(document).ready(function() {
   var url = window.location.href; //get url
   var h1Text = $('title').text(); //get h1 text
   var email = 'example@example.com';
   var body = url;
   var subject = 'Documentation Feedback for topic: '+h1Text;
   var hrefTitle = 'We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: '+email;
   $('#mailto').attr('href','mailto:'+email+'?body='+body+'&subject='+subject);
   $('#mailto').attr('title', hrefTitle);
 });

And html mailto link is like this now

<a id="mailto" href="" title="">Send us documentation feedback</a>

Full code is here https://jsfiddle.net/50c99uan/2/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM