Question

我有一个正在苦苦挣扎的脚本：

它有两件事

从URL中获取变量参数
将参数添加为脚本嵌入标签中的变量

排名第一的作品，我已经使用iframe对其进行了测试，并且能够将变量作为源代码传递。

第二个不适用于脚本标签这是代码段

这里有我要从url收集变量的代码

// Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
   name = name.replace(/[\[\]]/g,"\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name



var myvariable = getParameterByName('variable');

 $('#myvariable').html(myvariable);

我现在想将myvariable传递给javascript

<div id="otEmbedContainer" style="width:800px; height:640px"></div> <script src="https://exmaple.com/embed/embed/ot-embed.js?embedId=number&variable=myvariable"></script>

任何想法都很棒。

谢谢

修改后的代码似乎无效

<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
   name = name.replace(/[\[\]]/g,"\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name



var myvariable = getParameterByName('variable');

$（'＃myvariable'）。html（variable）;

function addScript（src，value）{ var s = document.createElement（'script'）; s.setAttribute（'src'，'https://exmaple.com/embed/embed/ot-embed.js?embedId=number&variable='）; s.setAttribute（'myvalue'，myId）; document.body.appendChild（s）; }

addScript（“ s”）;

Answer 1

您不能通过URL传递值，但是如果定义了该值，则可以使用属性将其传递给javascript

<div id="otEmbedContainer" style="width:800px; height:640px"></div> 
<script src="https://exmaple.com/embed/embed/ot-embed.js?embedId=number" myvalue="1234"></script>

然后在您的JavaScript中，您可以使用以下方法获取值：

document.currentScript.getAttribute('myvalue'); //1234

更新

现在，当您在运行时从URL检索值时，还需要动态加载JS。从URL中获取值后，从HTML中删除脚本，然后创建一个脚本并将其添加到HTML

function addScript( src, value ) {
    var s = document.createElement( 'script' );
    s.setAttribute( 'src', src );
    s.setAttribute( 'myvalue', value);
    document.body.appendChild( s );
}

使用您的源链接和您需要传递给JS的值调用上面给定的函数。

示例：

您的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic JS example</title>
    </head>
    <body>
        <button onclick="load();">Load JS and show value from URL</button>
    </body>
    <script>
        var load = function(){
            var url = new URL(window.location.href);
            var value = url.searchParams.get("value");

            var s = document.createElement("script")
            s.setAttribute("src", "./test.js");
            s.setAttribute("value", value);
            document.body.appendChild(s);
        }
    </script>
</html>

您的JS

value = document.currentScript.getAttribute('value');
alert(value);

在浏览器中加载HTML，在URL ?value=yeah中传递值，然后单击按钮以查看魔术。

Answer 2

如果要从同一脚本中读取参数，则可以获取最后一个脚本标记并从中读取src。

var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length - 1];

function parseQueryString(src) {
    var query = src.split('?').pop();
    var params = query.split('&');
    var result = {};

    for (var i = 0; i < params.length; i++) {
        var parts = params[i].split('=');
        result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
    }

    return result;
}

console.log(parseQueryString(lastScript.src))

如何将javascript变量传递给脚本嵌入标签

2 个答案: