如何在对话框中打开 URL JQUERY UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15459107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you open a URL in a dialog box JQUERY UI
提问by Daniel Saad
I've been looking for a simple solution for quite some time. I want a page (for example http://www.google.com) to be displayed in a JQuery UI Dialog window. The plan is to later add the URL dynamically so all links from my site will be displayed in said window.
一段时间以来，我一直在寻找一个简单的解决方案。我想要一个页面（例如http://www.google.com）显示在 JQuery UI 对话框窗口中。计划是稍后动态添加 URL，以便来自我网站的所有链接都将显示在所述窗口中。
I tried the following, but the dialog window is empty when clicking on the link.
我尝试了以下操作，但单击链接时对话框窗口为空。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
</head>
<body>
<a id="openwindow" href="http://www.google.com">Click me to test.</a>
</body>
</html>
I found a few examples, but none actually worked. I'd really appreciate some help.
我找到了一些例子，但没有一个真正起作用。我真的很感激一些帮助。
Thanks in advance.
提前致谢。
回答by Nick Andriopoulos
You don't need an iframeas has been suggested, but you should read the documentation on dialogs here.
您不需要iframe像建议的那样，但您应该阅读有关对话框的文档here。
Instead, you need to load the content on the .openproperty --
相反，您需要加载.open属性上的内容——
$( "#openwindow" ).dialog({
open: function(event, ui) {
$('#divInDialog').load('test.html', function() {
alert('Load was performed.');
});
}
});
Also, you seem to use .eachwith an id-- the idis supposed to be unique within the page. use classinstead.
此外，您似乎使用.each了id--id应该在页面内是唯一的。使用class来代替。
回答by The Alpha
You may try this
你可以试试这个
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1)})
.load($(this).attr('href')).appendTo('body').dialog();
});
});
Above code will create a new dialogon clicking on any link on your page and also add a class name myDlgClassand an unique id for each dialog like link-1, link-2and so on, but remember that only page link will be loaded not external link because of same origin policy.
上面的代码将dialog在您点击页面上的任何链接时创建一个新的，myDlgClass并为每个对话框添加一个类名和一个唯一的 id link-1，link-2等等，但请记住，由于同源策略，只会加载页面链接而不是外部链接.
Update :
更新 ：
To use an external site link you can use an iframe, here is an example using iframe.
要使用外部站点链接，您可以使用iframe，这是使用 iframe 的示例。
回答by Anubhab
Thismight help.. Here what i am doing is i am hovering on a link and the url is opening in a dialog box..
You should use classinstead of idif multiple same tags are getting created dynamically..ohterwise it will work for only single id.
这可能会有所帮助.. 这里我正在做的是我将鼠标悬停在链接上，并且 url 在对话框中打开..如果动态创建多个相同的标签class，您应该使用而不是使用id..ohterwise 它只适用于单个id.
$('.openwindow').click(function(){
var $this=$(this);
$.ajax({
url: $this.attr('href');//You got the link here
success: function(data) {
//show the dialog here..
//"data" contains the html returned by the url
},
error: function(jqXHR){
//Do something here
}
});
});
回答by PSR
You can use iframe:
您可以使用 iframe：
$("#iframeId").attr("src", $(this).attr("href"));
$('#dialogId').dialog('open');
<div id="divId" >
<IFRAME id="iframeId" SRC="" width="" height = "" >
</div>
