-1
iframe 요소가 포함 된 색인 페이지가 있습니다.이 iframe은 다른 DOMAIN 페이지를 참조합니다. 그리고 iframe 페이지에서 데이터를 가져와야하므로 postmessage 개념을 적용했습니다. 하지만 작동하지 않습니다.왜 내 postMessage가 제대로 작동하지 않습니까?
index.html을
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Using PostMessage for Cross-Domain Access to an Iframe</title>
<meta name="description" content="Example demonstrates using postMessage to interact with an iframe on another domain and obtain information about its objects and properties." />
<script type="text/javascript">
// check for browser support
if (window.addEventListener) {
// when DOM is ready assign button onclick handlers
window.addEventListener('DOMContentLoaded', function() {
// where to send messages with postMessage
var target_origin = 'Myiframe.html';
// get reference to form to attach button onclick handlers
var form = document.getElementById('demoForm');
// get reference to iframe window
var win = document.getElementById('ifrm').contentWindow;
// set height of iframe and display value
form.elements.button1.onclick = function() {
var ifrm = document.getElementById('ifrm');
var ht = ifrm.style.height = '160px';
this.form.display.value = 'The iframe\'s height is: ' + ht;
}
// to increment and display counter variable in iframed document
form.elements['button2'].onclick = function() {
win.postMessage({'task': 'ctr'}, target_origin);
}
// to get value of form element in iframed document
form.elements.button3.onclick = function() {
win.postMessage({'task': 'val'}, target_origin);
}
// to invoke function in iframed document
form.elements.button4.onclick = function() {
win.postMessage({'task': 'clear'}, target_origin);
}
}, false);
// message handler
window.addEventListener('message', function (e) {
// check message origin
if (e.origin === 'Myiframe.html') {
var task = e.data['task']; // task received in postMessage
// get reference to demo form
var form = document.getElementById('demoForm');
switch (task) { // postMessage tasks
// display counter received in postMessage
case 'ctr' :
form.display.value = 'counter in iframe is: ' + e.data['counter'];
break;
// display text box value received in postMessage
case 'val' :
form.display.value = 'The greeting is: ' + e.data['val'];
break;
case 'clear' :
// nothing to do for this one
break;
//default:
}
}
}, false);
}
</script>
</head>
<body>
<form id="demoForm" action="#">
<p>
<input name="button1" type="button" value="Button 1" />
<input name="button2" type="button" value="Button 2" />
<input name="button3" type="button" value="Button 3" />
<input name="button4" type="button" value="Button 4" />
</p>
<p><input type="text" name="display" size="30" readonly="readonly" /></p>
</form>
<iframe name="ifrm" id="ifrm" src="Myiframe.html"></iframe>
</body>
</html>
Myiframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>untitled</title>
<meta name="robots" content="noindex" />
<script type="text/javascript">
// example variable and function for cross-document demo
counter = 0;
function clearGreeting() {
document.forms['iframeDemoForm'].elements['greeting'].value = '';
}
// check for browser support
if (window.addEventListener) {
// message handler
window.addEventListener('message', function(e) {
// check message origin
if (e.origin === 'index.html') {
var task = e.data['task']; // task received in postMessage
var msg; // for postMessage reply to e.source
switch (task) { // postMessage tasks
// increment counter variable and send
case 'ctr' :
msg = { 'task': 'ctr', 'counter': ++counter };
e.source.postMessage(msg , e.origin);
break;
// send value of entry in text box (validate first)
case 'val' :
var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
var fld = document.forms['iframeDemoForm'].elements['greeting'];
var val = fld.value.replace(re, '');
var msg = {'task': 'val', 'val': val};
e.source.postMessage(msg , e.origin);
break;
// clear text box by calling function
case 'clear' :
clearGreeting();
break;
//default:
}
}
}, false);
}
</script>
</head>
<body>
<h1>Iframe</h1>
<ul>
<li>Button 1 sets iframe style height</li>
<li>Button 2 increments global variable in iframed document</li>
<li>Button 3 transfers Greeting below to text box above iframe</li>
<li>Button 4 clears Greeting text box below (calls function in iframe)</li>
</ul>
<form action="#" id="iframeDemoForm">
<label for="greeting">Enter a Greeting: </label>
<input type="text" name="greeting" id="greeting" value="Hello there!" />
</form>
<script type="text/javascript">
(function() {
// disable submission of all forms on this page
for (var i=0, len=document.forms.length; i<len; i++) {
document.forms[i].onsubmit = function() { return false; };
}
}());
</script>
<p id="demoInfo"><span class="news">Note</span>: This page is part of a tutorial on postMessage and is intended to display in an iframe. <a href="http://www.dyn-web.com/tutorials/iframes/postmessage/access/iframe.php">Click here</a> to see it in its proper context.</p>
<script type="text/javascript">
// if not in iframe, display link to tutorial
if (self === top) {
document.getElementById('demoInfo').style.display = 'block';
}
</script>
</body>
</html>
나는 몇 가지 동작을 buttoon이 발사 될 때, 유타 아무것도 첫 번째 버튼을 제외하고 작동하지 않습니다를 appled. 내가 실수를해서 나를 안내해 준다.