Javascript JQuery覆盖未加载外部网页
基本上，我正试图让一个插件工作，打开一个网页作为覆盖，而不是把你从当前的网页上。我无法让演示正常工作。这里演示了： 这里有一个工作演示： 我可以让它在我托管的其他页面（相对路径）上完美运行，但我希望覆盖打开，例如www.google.com-当我尝试这个时，覆盖只是空白。我不知所措Javascript JQuery覆盖未加载外部网页,javascript,jquery,html,css,Javascript,Jquery,Html,Css,基本上，我正试图让一个插件工作，打开一个网页作为覆盖，而不是把你从当前的网页上。我无法让演示正常工作。这里演示了： 这里有一个工作演示： 我可以让它在我托管的其他页面（相对路径）上完美运行，但我希望覆盖打开，例如www.google.com-当我尝试这个时，覆盖只是空白。我不知所措 <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/pa
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" type="text/css"
href="/media/css/overlay-apple.css"/>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<!-- remember that you can use any element inside the trigger -->
<button type="button">Show external page in overlay</button>
</a>
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>
jQuery工具独立演示
/*将半透明图像用于覆盖*/
#覆盖层{
背景图像：url（/media/img/overlay/transparent.png）；
颜色：#efefef；
高度：450px；
}
/*外部内容的容器。如果需要，使用垂直滚动条*/
内容包裹分区{
身高：441px；
溢出y：自动；
}
$（函数（）{
//如果将函数参数指定给overlay，
//假定它是onBeforeLoad事件侦听器
$（“a[rel]”）。覆盖({
面具：“黑暗的”，
效果：“苹果”，
onBeforeLoad:function（）{
//抓取内容中的包装器元素
var wrap=this.getOverlay（）.find（“.contentWrap”）；
//加载触发器中指定的页面
wrap.load（this.getTrigger（）.attr（“href”）；
}
});
});
X-frame-Options:SAMEORIGIN