У меня есть HTML-страница.На этой странице я хочу открыть всплывающее окно.У меня есть ссылка, по которой я должен нажать и открыть новое всплывающее окно.Но это не новое окно браузера.Это всплывающее окно на основе AJAX.
Я использовал всплывающее окно Queness всплывающее окно и YUI.
Теперь в этом окне я хочу показать iframe, который будет отображать страницу, связанную с ссылкой, на которую я нажал.,Но, с точки зрения безопасности, iFrame не показывает эту страницу во всплывающем окне, а управление передачей страницы на эту страницу и страница перенаправляется на эту страницу.
Как сделать всплывающее окно устойчивым, чтобы показать, чтоwindow?
Здесь я показываю код диалога 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. Вы можете изменить этот URL из свойства src iframe.