如何在 JQUERY UI 对话框中打开 URL
Posted
技术标签:
【中文标题】如何在 JQUERY UI 对话框中打开 URL【英文标题】：How do you open a URL in a dialog box JQUERY UI 【发布时间】：2013-03-05 17:50:54 【问题描述】：很长一段时间以来，我一直在寻找一个简单的解决方案。我希望在 JQuery UI Dialog 窗口中显示一个页面（例如 http://www.google.com）。计划是稍后动态添加 URL，以便我网站的所有链接都将显示在所述窗口中。
我尝试了以下方法，但单击链接时对话框窗口为空。
<!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>
我找到了一些示例，但没有一个真正起作用。非常感谢您的帮助。
提前致谢。
【问题讨论】：
基本上你想要一个ajax调用是吗？ 【参考方案1】：您不需要iframe，正如建议的那样，但您应该阅读有关对话框here 的文档。
相反，您需要在 .open 属性上加载内容 --
$( "#openwindow" ).dialog(
open: function(event, ui)
$('#divInDialog').load('test.html', function()
alert('Load was performed.');
);
);
此外，您似乎将.each 与id 一起使用——id 在页面中应该是唯一的。请改用class。
【讨论】：
如果 URL 在另一个域中，则不能使用.load()，因为跨域 AJAX 限制。【参考方案2】：
你可以试试这个
$(function()
$('a').on('click', function(e)
e.preventDefault();
$('<div/>', 'class':'myDlgClass', 'id':'link-'+($(this).index()+1))
.load($(this).attr('href')).appendTo('body').dialog();
);
);
上面的代码将在单击页面上的任何链接时创建一个新的dialog，并为每个对话框添加一个类名myDlgClass和一个唯一的ID，例如link-1、link-2等等，但请记住由于同源策略，只会加载页面链接而不是外部链接。
更新：
要使用外部站点链接，您可以使用iframe，这里是an example using iframe。
【讨论】：
【参考方案3】：This
可能会有所帮助..我正在做的是我将鼠标悬停在一个链接上，并且该网址正在对话框中打开..
如果动态创建多个相同的标签，您应该使用class 而不是id。否则它只适用于单个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
);
);
【讨论】：
【参考方案4】：你可以使用 iframe：
$("#iframeId").attr("src", $(this).attr("href"));
$('#dialogId').dialog('open');
<div id="divId" >
<IFRAME id="iframeId" SRC="" height = "" >
</div>
【讨论】：
以上是关于如何在 JQUERY UI 对话框中打开 URL的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery UI 对话框中以编程方式创建的 iframe 的大小