时间戳

首页 > 解决方案 > jQuery html 脚本 document.currentScript

javascript - jQuery html 脚本 document.currentScript

问题描述

我使用 html() 并且找不到在父脚本中获取变量的方法。

child.html

<section class="mod_el">
    <div id="any_element"></div>
</section>
<script type="text/javascript">
    document.currentScript.childVar = {
        parameterOne:"ONE"
    };
</script>

父.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="container"></div>
    <script>
        async function LoadChild() {
            const resp = await fetch(`child.html`, {
                method: "GET",
                credentials: "include"
            });
            if (!resp.ok)
                return;
            const result = await resp.text();
            $("#container").html(result);
            console.log(childVar.parameterOne); //!!!!!!! ?????
            //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
        LoadChild();
    </script>
</body>
</html>

在 parent.html 中获取变量“childVar”值的可能方法是什么？

非常感谢您的帮助

UPDATE - FIND SOLUTION 以这种方式解决了问题（没有jquery），但找到了结果..

在 child.html 中需要设置

document.currentScript.ownerDocument.childVar = {
            parameterOne:"ONE"
        };

在 parent.html 中

const link = document.createElement('link');
link.rel = 'import';
link.href = `child.html`;
link.setAttribute('async', '');
link.onload = (e) => {
                    console.log(link.import.childVar.parameterOne );
                };
document.head.appendChild(link);

标签： javascriptjquerydocument

解决方案

我认为您应该使用以下解决方案。它将允许您解析 dom 中的这些脚本，并且您可以轻松地修改 dom 上的任何内容。

我已将您的 child.html 文件解析为 JS dom 对象，解析脚本元素并附加到您父母的 body 元素中。我知道这需要做一些工作，但您可以在运行时解决 child.html 的脚本错误。

Child.html

<section class="mod_el">
    <h1>Hello</h1>
</section>
<script type="text/javascript">
    childVar = {
        parameterOne:"ONE"
    };
</script>

父.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        async function LoadChild() {
            const resp = await fetch('child.html', {
                method: "GET",
                credentials: "include"
            });
            if (!resp.ok)
                return;
            const result = await resp.text();

            //Parse html.
            var parser = new DOMParser();
            var doc = parser.parseFromString(result,"text/html");

            //Parse scripts.
            try{
                var scripts = "";
                for(var script of doc.getElementsByTagName('script')){
                    scripts += script.innerText;
                }
                eval(scripts);
            }
            catch(e)
            {
                //Manage your runtime child.html script errors here.
            }

            /*
            * Append body to our body element.
            * Here you can amend your child.html's elements.
            */
            document.body.appendChild(doc.body);

            console.log(childVar.parameterOne);
        }
        LoadChild();
    </script>
</body>
</html>

如果您喜欢此解决方案，请点赞。

推荐阅读