我在 Canvas LMS 中进行编码,这意味着我在父级中对 HTML 命令的使用有限。我创建了一个 iframe 表单,我需要一个父级的值。为此,我将此值放在一个 div 中。但是命令“parent.document.getElementById("nameuser").value”返回:Uncaught DOMException: Blocked a frame with origin" ERROR。还有另一种获取父值的方法吗?
框架代码
<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-widht, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var parentURL = window != window.parent ? document.referrer : null;
var url = parentURL.split('courses/')[1];
url = url.slice(0,2);
if(url == "49"){
$('input[id=turma34]').prop('checked', false);
$('input[id=turma49]').prop('checked', true);
}
if(url == "34"){
$('input[id=turma49]').prop('checked', false);
$('input[id=turma34]').prop('checked', true);
}
$('input[id=modulo3]').prop('checked', true);
nameal.value="testenome";
var quadro = document.createElement("iframe");
quadro.name="hidden_iframe1";
quadro.id="hidden_iframe1";
quadro.style="display:none;"
document.body.appendChild(quadro);
//y = parent.document.getElementById('nameuser').value;
alert(parent.document.getElementById("nameuser").value);
//x = JSON.stringify(y);
})
</script>
<style type="text/css">
body{
margin: 0;
}
form{
width: 450px;
margin:auto;
background-color: rgba(167, 29, 51);
padding: 10px 20px;
box-sizing: border-box;
margin-top:20px;
border-radius: 7px;
}
h4{
color: #fff;
text-align: center;
margin: 0;
font-size: 15px;
}
p{
font-family: 'Helvetica';
font-style: normal;
color: #fff
}
#desc{
text-align: justify;
font-size: 12px;
}
textarea{
border: 1px solid #fff;
background #fff;
width:100%;
height:50px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 1px 1px 2px #333333;
-moz-box-shadow: 1px 1px 2px #333333;
-webkit-box-shadow: 1px 1px 2px #333333;
}
input[type=text]{
border: 1px solid #fff;
background #fff;
width:100%;
height:30px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 1px 1px 2px #333333;
-moz-box-shadow: 1px 1px 2px #333333;
-webkit-box-shadow: 1px 1px 2px #333333;
}
#submit {
border:1px solid #fff;
background-color: rgba(167, 29, 51);
border-radius:4px;
display:inline-block;
cursor:pointer;
font-weight:bold;
font-size:13px;
padding:6px 10px;
color: #fff;
text-decoration: none;
margin-left: 42%;
margin-right: 50%;
}
.tabela{
text-align: center;
align-items: center;
text-decoration-color: #fff;
color: #fff;
}
</style>
</head>
<body>
<form name = "formaval" action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSdivzm7jTmYJG3Gg4LR_9XlkCzDX1mxto-7jqlSp4w1KQVgPA/formResponse" method=”POST” id=”contact_form” name=”” class="feedback-form" target="hidden_iframe1" onsubmit="myButton.disabled = true; return true;" onsubmit="alert('Resposta enviada! Muito obrigado!');">
<div class="c_nome">
<h4><p>Nome (opcional)</h4></p>
<input type="text" id="nameal" name="entry.1905947256" > </p>
</div>
<h4><p hidden>Turma</p></h4>
<p hidden><input type="radio" id="turma34" name="entry.629188928" value="34">
<input type="radio" id="turma49" name="entry.629188928" value="49">
</p>
<div class="c_nota">
<h4><p>Nota do Módulo</p></h4>
<p id="desc">Considerando conteúdo, dinâmica das aulas, testes e exercícios práticos, de 0 a 10, que nota você daria para esse módulo?</p></h6>
<p> <table class="tabela" border = "0"> <tr>
<td>0 </td>
<td>1 </td>
<td>2 </td>
<td>3 </td>
<td>4 </td>
<td>5 </td>
<td>6 </td>
<td>7 </td>
<td>8 </td>
<td>9 </td>
<td>10 </td></tr>
<tr>
<td><input type="radio" required name="entry.1024362957" value="0"></td>
<td><input type="radio" name="entry.1024362957" value="1"> </td>
<td><input type="radio" name="entry.1024362957" value="2"></td>
<td><input type="radio" name="entry.1024362957" value="3"></td>
<td><input type="radio" name="entry.1024362957" value="4"></td>
<td><input type="radio" name="entry.1024362957" value="5"></td>
<td><input type="radio" name="entry.1024362957" value="6"></td>
<td><input type="radio" name="entry.1024362957" value="7"></td>
<td><input type="radio" name="entry.1024362957" value="8"></td>
<td><input type="radio" name="entry.1024362957" value="9"></td>
<td><input type="radio" name="entry.1024362957" value="10"></td>
</tr>
</table>
</p>
</div>
<div hidden class="c_modulo">
<h4><p> Módulo</p></h4>
<p id="desc">Considerando conteúdo, dinâmica das aulas, testes e exercícios práticos, de 0 a 10, que nota você daria para esse módulo?</p></h6>
<p> <input type="radio" id="modulo1" name="entry.1084607278" value="M1">
<input type="radio" id="modulo2" name="entry.1084607278" value="M2">
<input type="radio" id="modulo3" name="entry.1084607278" value="M3">
<input type="radio" id="modulo4" name="entry.1084607278" value="M4">
<input type="radio" id="modulo5" name="entry.1084607278" value="M5">
<input type="radio" id="modulo6" name="entry.1084607278" value="M6">
<input type="radio" id="modulo7" name="entry.1084607278" value="M7">
<input type="radio" id="modulo8" name="entry.1084607278" value="M8">
<input type="radio" id="modulo9" name="entry.1084607278" value="M9">
<input type="radio" id="modulo10"name="entry.1084607278" value="M10">
</p>
</div>
<div class="c_justificativa">
<h4><p>Justificativa</h4></p>
<textarea name="entry.1092321263":></textarea> <br/>
</div>
<div class="c_recomendacao">
<h4><p>Recomendação</p></h4>
<p id="desc">De 0 a 10, quanto você recomendaria esse curso?</p>
<p> <table class="tabela" border = "0"> <tr>
<td>0 </td>
<td>1 </td>
<td>2 </td>
<td>3 </td>
<td>4 </td>
<td>5 </td>
<td>6 </td>
<td>7 </td>
<td>8 </td>
<td>9 </td>
<td>10 </td></tr>
<tr>
<td><input type="radio" required name="entry.1797755703" value="0"></td>
<td><input type="radio" name="entry.1797755703" value="1"></td>
<td><input type="radio" name="entry.1797755703" value="2"></td>
<td><input type="radio" name="entry.1797755703" value="3"></td>
<td><input type="radio" name="entry.1797755703" value="4"></td>
<td><input type="radio" name="entry.1797755703" value="5"></td>
<td><input type="radio" name="entry.1797755703" value="6"></td>
<td><input type="radio" name="entry.1797755703" value="7"></td>
<td><input type="radio" name="entry.1797755703" value="8"></td>
<td><input type="radio" name="entry.1797755703" value="9"></td>
<td><input type="radio" name="entry.1797755703" value="10"></td></tr></p>
</div>
</table>
<div class="c_btn">
<input class="btn btn-submit" type="submit" name="myButton" id="submit" value="Enviar";this.disabled=true onclick= "alert('Resposta enviada! Muito obrigado!')">
</div>
</form>
</body>
</html>
父代码
$(document).ready(function () {
$.getJSON("/api/v1/users/self", function(data){
x = data;
y = JSON.stringify(x);
console.log(y);
});
divname = '<div id="nameuser"> <p>' +y+'</p></div>'
$('#content').prepend(divname);
}