如何使用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