如何使用jquery / javascript从头部动态添加的脚本标签读取值

Question

我有一个从服务获取的脚本标签。 我只是将其附加到html的头部。

它被附加了，但问题是它具有一些需要在应用程序中访问的值。

<script>

abc.header.value = "1";
abc.header.path = "/abc/def/ghi?isThirdParty=false&version=v123";

</script>

如果脚本尝试添加到标头中（如果我尝试访问abc.header.value），则会抛出未定义的错误。

如何从添加的脚本访问值。 而且我还有一个全局对象，有没有办法将所有动态添加的值添加到该对象？

示例片段：我从ajax调用中获取脚本标签，并将其存储在变量中。

var sampSnip = "<script> abc.header.value = "1"; abc.header.path = "/abc/def/ghi?isThirdParty=false&version=v123"; </script>";

$('head').append(sampSnip);

Answer 1

看一下我刚刚为您编写的这个简单的登录表单。

// HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles/index.css"> 
    <script src="scripts/index.js"></script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="username">
        <input type="password" name="password" placeholder="password">
        <input id='signin' type="button" value="Sign In">
    </form>
</body>
</html>

// JS

document.addEventListener("DOMContentLoaded", init);

function init(){
    document.getElementById('signin').addEventListener('click', click.signin);
}
var click = {
    "signin": function(e){
        e.preventDefault();
        var inputs = e.target.parentNode.children;
        var data = new FormData();
        var client = new XMLHttpRequest();
        for(var i=0; i < inputs.length; i++){
            if(inputs[i].type !== 'button'){
                data.append('credentials['+inputs[i].name+']', inputs[i].value);                
            }
        }
        client.addEventListener("load", callback.signin);
        client.open("POST", "/core/signin.php");
        client.send(data);
    }   
};
var callback = {
    "signin": function(e){
        var data = JSON.parse(e.target.response);
        console.log(data);
    }   
};

// PHP

<?php
echo json_encode($_POST['credentials']);
?>

// CSS

body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: #0B9AD8;
    -webkit-background-size: cover; 
    background-size: cover;
}
form{
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
    align-self: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 1em;
    margin: 0 !important;
    background-color: #ECF0F1;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
input{
    width:22em; 
    height: 3em;
    font-size: 1em;
    font-weight: lighter !important; /* FIREFOX */
    display: block;
    margin-bottom: .5em;
    outline: none;
    text-align: center;
    background-color: #fff; 
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 0 !important; /* FIREFOX */
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input[type="button"]{
    cursor: pointer;
    border: 1px solid #0089C4;
    color: #fff;
    background: #0089C4;
    margin-bottom: 0 !important;
}
input[type="button"]:hover{
    background: #0B9AD8;
}
input[type="button"]:active{
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}

如何使用jquery / javascript从头部动态添加的脚本标签读取值

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-30 11:30:25

如何使用jquery / javascript从头部动态添加的脚本标签读取值

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-30 11:30:25

解决方案1
1 已采纳 2015-12-30 11:30:25