Zenn
⚡

FileMaker WebView リンクタグで target='_blank' が効かない事への対応

2023/03/22に公開
FileMaker
tech

https://twitter.com/qbxxdp/status/1638469613246906368

Windows、FileMaker Pro 19.3.1以降で、WebViewのレンダリングにMicrosoft Edge WebView2 エンジンが使用されるようになりました。

弊害として、リンクタグで target='_blank' を指定しても外部ブラウザで開かなくなりました。

macOSは、外部ブラウザで開きます。

対策

target='_blank' の設定があるリンクをクリックした場合、FileMakerのスクリプトを実行し、「スクリプト:URLを開く」でリンクを開くようにします。

FileMaker スクリプトを作成

スクリプト名: fwv_OpenUrl(url)

URL を開く [ダイアログあり:オフ; Get(スクリプト引数)]

WEBビューア の設定

以下のJavaScriptを組み込み

WEBビューアでページ読み込み後、リンクタグにFileMaklerのスクリプトを実行するように設定されます。

    <script>
        const changeLinkForFm = () => {
            /*target = '_blank' をFileMakerのスクリプト URLを開くで実行*/
            var links = document.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', function (e) {
                    if (this.target == '_blank') {
                        e.preventDefault();
                        FileMaker.PerformScriptWithOption('fwv_OpenUrl(url)', this.href, '3');
                    }
                }, false);
            }
        };
        window.addEventListener('DOMContentLoaded', function () {
            changeLinkForFm();
        });
    </script>

htmlの例

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <meta name="color-scheme" content="light dark">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<p><a href='https://fm-aid.com/bbs2/viewforum.php?id=2' target='_blank'>初心者のFileMaker pro Q&A↗</a></p>
<code>&lt;a href='https://fm-aid.com/bbs2/viewforum.php?id=2' target='_blank'&gt;初心者のFileMaker pro Q&A↗&lt;/a&gt;</code>

<p><a href='https://fm-aid.com/markdownthing/' target='_blank'>FileMakerで画像付きリッチテキストドキュメントを作成↗</a></p>
<code>&lt;a href='https://fm-aid.com/markdownthing/' target='_blank'&gt;FileMakerで画像付きリッチテキストドキュメントを作成↗&lt;/a&gt;</code>
    <script>
        const changeLinkForFm = () => {
            console.log('changeLinkForFm');
            /*target = '_blank' をFileMakerのスクリプト URLを開くで実行*/
            var links = document.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', function (e) {
                    if (this.target == '_blank') {
                        e.preventDefault();
                        FileMaker.PerformScriptWithOption('fwv_OpenUrl(url)', this.href, '3');
                    }
                }, false);
            }
        };
        window.addEventListener('DOMContentLoaded', function () {
            changeLinkForFm();
        });
    </script>
</body>

</html>

読み込み後のWEBビューアに対して以下のスクリプトを実行することでも、リンクタグをFileMakerのスクリプトで実行するように変更できます。

リンクがtarget='_blank'の場合、fwv_OpenUrl(url) を実行

Web ビューアで JavaScript を実行 [ オブジェクト名: "wv_"; 関数名: 
"(()=>{
let links = document.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', function (e) {
                    if (this.target == '_blank') {
                        e.preventDefault();
                        FileMaker.PerformScriptWithOption('fwv_OpenUrl(url)', this.href, '3');
                    }
                }, false);
            }
})"
]

リンクがhttp/httpsで始まる場合、fwv_OpenUrl(url) を実行

Web ビューアで JavaScript を実行 [ オブジェクト名: "wv_"; 関数名: 
"(()=>{
let links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function (e) {
        console.log(this.href);
        if (this.href.match(/^https?:\/\//)) {
            e.preventDefault();
            FileMaker.PerformScriptWithOption('fwv_OpenUrl(url)', this.href, '3');
        }
    }, false);
}
})"
]

Discussion