Opening share content inline instead of new window/tab?

[mtbpm]

hello nick

we like your plugin and are considering working with it. could you please share your opinion on the following:

current shareon behaviour

• klick a share button
• new window/tab is opened with preloaded share-content (user leaves current page / context)

desired shareon behaviour

• klick a share button
• inline element (e.g. div or iframe) is populated with preloaded share-content (user stays on current page)

is this impossible/restricted by CORS policies or other technical reasons?

thank you

ps.: i understand that is currently not part of shareon's features, just asking if you think this could be possible.

[kytta]

Hi @mtbpm,

sorry for taking so long with my answer. Theoretically, you could use an <iframe> to display the share dialogue in-page. However, I don't know if this would work properly. AFAIK, many browsers block 3rd-party <iframe>s, and some website providers don't allow such embedding because of strict Cross-Origin policies. Heck, even opening pop-ups in new windows (instead of the new tabs) is now considered bad :(

You could experiment with it, of course. Shareon doesn't offer customizing listeners and link hrefs. You could load and initialize Shareon, and then convert listeners to something new. For example:

<div class="shareon">
  <a class="twitter"></a>
</div>

// TODO: import Shareon
// TODO: initialize Shareon

for (const container of querySelectorAll('.shareon')) {
  for (const button of container.children) {
    const url = button.getAttribute("href");
    button.setAttribute("href", "#");
    button.addEventListener("click", function () {
      // open <iframe> with url
    })
  }
}

I'm afraid, I can't help any further here 😅

[kytta]

I'll close the issue, but you're free to ask further questions or opening new issues for discussion!

[mtbpm]

hello kytta, thanks a lot for the details on this. i will try it out and let you know if it worked.