[Plugin] Webview for browser (using iframe)

[ReinforceZwei]

As per #2515 comment, webview note doesn't work in browser. So i've made an alternative using iframe.

Source code

HTML. Set note type as HTML.

<iframe class="my-iframe" frameborder="0" style="overflow:hidden;height:100%;width:100%" width="100%" height="100%"></iframe>
<h1 class="my-hint"></h1>
<style>
    div:has(> .my-iframe),
    .note-detail:has(.my-iframe),
    .note-detail-render:has(.my-iframe),
    .note-detail-render-content:has(.my-iframe) {
        height: 100%;
    }
</style>

Javascript. Set note type as JS frontend. Save this note as child note under the HTML note.

const ATTR_NAME = "webSrc"

let note = api.getActiveContextNote()
let frame = api.$container.find(".my-iframe")
let hint = api.$container.find(".my-hint")
console.log(note.type, frame, hint)
if (note.type === "render" && frame.length === 1) {
    let webSrc = note.getAttributeValue("label", ATTR_NAME)
    console.log(webSrc)
    if (webSrc != null) {
        frame.attr("src", webSrc)
    } else {
        frame.hide()
        hint.text("To load a webpage, set webSrc label to a URL")
    }
} else {
    hint.text("Cannot find the iframe element")
}

How to use

After saving the source code,

1. Open a new note
2. Set the note type to render note
3. Add a relation attrubute pointing to the HTML note
4. Add a label named webSrc and fill the value with your URL
5. Reopen the note

Limitation

• Some website may disallow their webpage being embedded in an iframe.
• Currently iframe is not showing full height on desktop app (I don't use desktop app so it might take some time to fix)

[eliandoran]

Just added support for using iframe for webview in TriliumNext as well.