我创建了一个灯箱，带有iframe功能来加载外部网站。一些网站在灯箱负载中被设置，例如我自己的网站www.scriptsconnect.com，以及www.w3schools.com。但是google.com和yahoo.com等网站无法加载，我浏览器中抛出的错误与域策略相同。
可以在此处找到JSFiddle：http://jsfiddle.net/WZrmL/
以下是我的所有代码。如果有人可以帮助我采用可以绕过相同原产地政策的方法，我真的很感激。也许我的做法是抛出SOP？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>SC Popup</title>
<meta charset="windows-1252">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.clear { clear: both; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; }
/* Backdrop */
div.popupbackdrop {
position: fixed;
top: 0;
left: 0;
z-index: 999998;
display: none;
width: 100%;
height: 100%;
cursor: pointer;
background: rgba(0, 0, 0, 0.30);
}
/* Popup */
#scpopup {
position: absolute;
top: 50%;
left: 50%;
z-index: 999999;
display: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
color: #000;
font-family: Arial, Helvetica, Sans-serif;
}
#scpopupouter {
padding: 15px;
height: 100%;
border: 15px solid #000;
border: 15px solid rgba(0, 0, 0, 0.80);
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
}
#scpopupinner {
position: relative;
height: 100%;
}
/* Popup Title/Subtitle */
#scpopuptitle,
#scpopupsubtitle {
position: absolute;
z-index: 50;
width: 100%;
font-size: 13px;
text-align: center;
}
#scpopuptitle {
top: -60px;
font-weight: bold;
}
#scpopupsubtitle {
bottom: -60px;
}
#scpopupholder {
height: 100%;
}
#scpopupcontent {
height: 100%;
color: #131313;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 15px;
text-align: left;
}
#scpopupcontent iframe {
width: 100%;
height: 100%;
border: 0 none;
}
</style>
<script>
(function($){
$.fn.scpopup = function(options){
var defaults = {
// Settings Variables
linkType : "iframe", // iframe, inline, html, image
scWidth : "65%", // Width of popup container (in px, % or auto)
scHeight : "auto", // Height of popup container (in px, % or auto)
popupMaxWidth : "700px;", // Max width of popup container (in px, % or auto)
popupMaxHeight : "auto", // Max width of popup container (in px, % or auto)
popupTheme : "test", // Popup theme name (is an additional class added to parent)
activeClass : "active", // Class name to use for active elements
popupPosition : "fixed", // absolute, fixed
effectOpen : "", // Popup opening effect
effectClose : "", // Popup closing effect
htmlContent : "<h2>Title</h2><p>This content will go into the popup.</p>" // Must set linkType to html
};
var options = $.extend(defaults, options);
// Functions to Specify Width and Height of Popup
function scpopupWidth(scW) {
$('#scpopup').css({'position' : options.popupPosition, 'margin-left' : '-' + scW/2 + 'px'});
}
function scpopupHeight(scH) {
$('#scpopup').css({'position' : options.popupPosition, 'margin-top' : '-' + scH/2 + 'px'});
}
// Append Backdrop and Content Container
$('div.popupbackdrop').remove();
$('body').append('<div class="popupbackdrop"></div>');
$('body').append('<div id="scpopup" class="scpopup"><div id="scpopupouter"><div id="scpopupinner"><div id="scpopuptitle"></div><div id="scpopupsubtitle"></div><div id="scpopupholder"><div id="scpopupcontent"></div><div class="clear"></div></div><div class="clear"></div></div><div class="clear"></div></div>');
// Set Width and Height of Outer Container
$('#scpopup').width(options.scWidth).height(options.scHeight).addClass(options.popupTheme);
$(this).addClass('scpopuplink');
// Click Event: Open
$(this).on('click', function(e){
e.preventDefault();
// Margin/Width/Height for Popup
scpopupWidth($('#scpopup').width());
scpopupHeight($('#scpopup').height());
// Setting Body/HTML tags to 100% width and height
$('body', 'html').css({'width' : '100%', 'height' : '100%'});
$('body').addClass('scpopupactive');
// Transitions
$('div.popupbackdrop').fadeIn(150).addClass(options.activeClass);
$('#scpopup').fadeIn(300).addClass(options.activeClass);
// Empty Title/Subtitle Holders on Click
$('#scpopuptitle, #scpopupsubtitle').empty();
// Load Title/Subtitles on Click
$('<span></span>').text($(this).attr('title')).appendTo('#scpopuptitle');
$('<span></span>').text($(this).attr('alt')).appendTo('#scpopupsubtitle');
// Link Type (linkType)
if(options.linkType == 'iframe'){
$('#scpopupcontent').empty().append(
$('<iframe>', {src: this.href})
);
//$('#scpopupcontent').empty().append('<iframe src="' + this.href + '"></iframe>');
}else if(options.linkType == 'inline'){
//alert('inline');
}else if(options.linkType == 'html') {
$('#scpopupcontent').empty().append(options.htmlContent);
}else if(options.linkType == 'image') {
//alert('image');
}
});
// Click Event: Close
$('div.popupbackdrop').on('click', function(e){
e.preventDefault();
$('body').removeClass('scpopupactive');
$(this).delay(50).fadeOut(300).removeClass(options.activeClass);
$('#scpopup').delay(25).fadeOut(150).removeClass(options.activeClass);
});
};
})(jQuery);
$(document).ready(function(){
$('.itemlink').scpopup({ scHeight : "500px" });
$('.htmlcontent').scpopup({
linkType : "html",
scHeight : "350px",
htmlContent : "<h2>HTML Content Title</h2><p>This content will go into the popup. This content shows up in the popup only if linkType is set to html.</p>"
});
});
</script>
</head>
<body>
<a href="http://www.google.com" class="itemlink" target="_blank" title="Google Title" alt="Google Subtitle">Google</a>
<a href="http://www.yahoo.com" class="itemlink" target="_blank" title="Yahoo Title" alt="Yahoo Subtitle">Yahoo</a>
<a href="http://www.w3schools.com" class="itemlink" target="_blank" title="W3Schools Title" alt="W3Schools Subtitle">W3Schools</a>
<a href="http://www.scriptsconnect.com" class="itemlink" target="_blank" title="ScriptsConnect Title" alt="ScriptsConnect Subtitle">ScriptsConnect</a>
<a href="#" class="htmlcontent" target="_blank">html content</a>
</body>
</html>
答案 0 :(得分：2)
也许原因是谷歌回归：
X-Frame-Options：SAMEORIGIN
您可以在本规范中阅读有关它的信息：
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
如果我理解正确，当您收到 X-Frame-Options：SAMEORIGIN 时，您可以在IFrame中打开此窗口，但只能在同一页面上打开。
答案 1 :(得分：1)
答案 2 :(得分：1)
Google和Yahoo等网站SAMEORIGIN设置了X-Frame-Options，这意味着除非您是Google或Yahoo，否则您无法在iframe中加载该网站。您可以尝试卷曲和卷曲您正在寻找的页面并显示结果或使用某种代理。