JSFiddle - React, Tailwind, and code Playground
HTML
<iframe id='iframe' width='100%' src="https://www.verkooppartner.nl" frameborder='1' height="500"></iframe>
<button>Grabz and Wrap - Iframe</button>
JavaScript
// Range demo for a Blog
$(function () {
// Rangy - Selection/Highlighting Test
var iframe = $('#iframe')[0],
iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("<html><head><style></style></head><body><p>Pleazz <b>select some</b> of this text and press the button</body></html>");
iframeDoc.close();
$('button').click(function () {
grabSelectedText();
});
});
function grabSelectedText() {
var t = '',
window = $('#iframe')[0].contentWindow.window,
document = $('#iframe')[0].contentWindow.document,
chucknorris = document.createElement("chucknorris");
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) {
t = document.selection.createRange().text;
}
var range = t.getRangeAt(0).cloneRange();
range.surroundContents(chucknorris);
t.removeAllRanges();
t.addRange(range);
return t;
}