<html>
<head>
<title>Web Share API Usage - RJM Programming - July, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share</title>
</head>
<body onload="var suggestion=location.search.split('suggestion=')[1] ? decodeURIComponent(location.search.split('suggestion=')[1].split('&')[0]).replace(/\+/g,' ') : ''; if (suggestion != '') { document.getElementById('shareurl').placeholder=suggestion; document.getElementById('sbut').value+=' to content as below'; document.body.innerHTML+='<br><br><iframe style=width:100%;height:900px; src=/pdfimageplustext.php?pdffile=' + encodeURIComponent(suggestion.split('#')[0]) + '></iframe>'; }">
<style>
input { background-color: yellow; }
input[type=button] { background-color: orange; }
button { background-color: lightgreen; }
</style>
<h2>Web Share API Usage</h2>
<h3>RJM Programming - July, 2022</h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share' href='//developer.mozilla.org/en-US/docs/Web/API/Navigator/share'>https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share</a></h4><br>
<!--p><button>Share MDN!</button></p>
<p class="result"></p>
<script type='text/javascript'>

const shareData = {
title: 'MDN',
text: 'Learn web development on MDN!',
url: 'https://developer.mozilla.org'
}

const btn = document.querySelector('button');
const resultPara = document.querySelector('.result');

// Share must be triggered by "user activation"
btn.addEventListener('click', async () => {
try {
await navigator.share(shareData)
resultPara.textContent = 'MDN shared successfully'
} catch(err) {
resultPara.textContent = 'Error: ' + err
}
});
</script-->

<div>
<label for="shareurl"><input type=button onclick='shareurl();' id='sbut' value="Share URL Link"></input>: </label>
<input title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https://www.rjmprogramming.com.au/ITblog/#RJM Programming Blog#IT Blog' id=shareurl ondblclick="this.value=this.placeholder;"></input><br><br><span> ... and/or ... </span><br><br>
<label for="files"><input type=button onclick="document.getElementById('share').click();" value="Share media or document files"></input>: </label>
<input id="files" type="file" accept="image/*,video/*,audio/*,application/*,text/*" multiple>
</div><br><br>
<button id="share" type="button">Share your media or documents or link!</button>
<output id="output"></output>
<script type='text/javascript' src='/web_share_api_test.js' defer></script>
</body>
</html>