0
나는 html 페이지가 있습니다. 그 페이지에서 나는 팝업 창을 열고 싶다. 나는 클릭해야하는 링크가 & 새 팝업을 엽니 다. 그러나 새로운 브라우저 창은 아닙니다. AJAX 기반 팝업입니다.일부 사이트가 팝 윈도우에서 열리지 않는 이유는 무엇입니까?
나는 Queness 팝업 & YUI 대화 팝업을 사용했습니다.
이제 해당 창에서 클릭 한 링크와 관련된 페이지를 표시 할 iframe을 표시하려고합니다. 그러나 보안상의 관점에서 iFrame은 팝업 창에서 해당 페이지를 표시하지 않지만 페이지 제어는 해당 페이지 & 페이지로 이동하여 해당 페이지로 리디렉션됩니다.
어떻게 그 창을 표시하기 위해 꾸준히 팝업을 만드시겠습니까?
여기, 내가 보여주는하고 YUI 대화 코드 :
<html>
<head>
<title>Yahoo Dialog !</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/container/container-min.js"></script>
<script type="text/javascript">
document.documentElement.className = "yui-pe";
</script>
<style type="text/css">
#example {
height:30em;
}
label {
display:block;
float:left;
width:45%;
clear:left;
}
.clear {
clear:both;
}
#resp {
margin:10px;
padding:5px;
border:1px solid #ccc;
background:#fff;
}
#resp li {
font-family:monospace
}
.yui-pe .yui-pe-content {
display:none;
}
</style>
<script>
YAHOO.namespace("example.container");
YAHOO.util.Event.onDOMReady(function() {
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
var handleSuccess = function(o) {
var response = o.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
// Remove progressively enhanced content class, just before creating the module
YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
{ width : "60em",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
});
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
var data = this.getData();
if (data.firstname == "" || data.lastname == "") {
alert("Please enter your first and last names.");
return false;
} else {
return true;
}
};
// Wire up the success and failure handlers
YAHOO.example.container.dialog1.callback = { success: handleSuccess,
failure: handleFailure };
// Render the Dialog
YAHOO.example.container.dialog1.render();
YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
//YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
});
</script>
</head>
<body class="yui-skin-sam">
<h1>Dialog Quickstart Example</h1>
<div class="exampleIntro">
<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page — whether interally to the page or by sending the information to the server via form post or XMLHttpRequest. This example shows how to do the latter. Click the button to show the Dialog instance and its form fields; fill out the form; submit the form. Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>
</div>
<div>
<a href="#" id="show">Yahoo Mail !</a>
</div>
<form >
<div id="dialog1" class="yui-pe-content">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php">
<div><p class="whitetext">YMail !<br/>
<iframe src ="http://www.stackoverflow.com/" width="750" height="400"><p>Ymail</p></iframe>
</p></div>
</form>
</div>
</div>
</form>
</body>
</html>
이 dialog.html 페이지입니다. 하지만로드하는 동안 http://stackoverflow.com으로 전송됩니다. iframe의 src 속성에서이 url을 변경할 수 있습니다.
위의 코드는 어디에서 XMLHttpRequest를 수행하려고합니까? – Quentin
@David Dorward : 게시 된 코드에는 YUI 라이브러리에서 완료된 것처럼 표시되지 않지만 페이지에 표시되는 설명은 다음과 같습니다. * "대화 상자에서 자동으로 YUI 연결 관리자를 사용하여 XMLHttpRequest를 통해 데이터를 서버로 보냅니다." *. – Guffa