在灯箱上集成网页内容页面
Posted
技术标签:
【中文标题】在灯箱上集成网页内容页面【英文标题】：Integrate web content page on lightbox 【发布时间】：2016-01-26 06:04:55 【问题描述】：我有两个页面：第一个页面包含一个按钮，单击它会显示一个灯箱。我想获取第二页的内容并将其放在灯箱上
第1页
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script>
$(document).ready(function ()
$(".inline").colorbox( inline: true, width: "50%" );
)
</script>
<title></title>
</head>
<body>
<h1>Colorbox Demonstration</h1>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This content comes from a hidden element on this page.</strong></p>
<p>The inline option preserves bound javascript events and changes, and it puts the content back where it came from when it is closed.</p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>btn1</a></p>
</div>
</div>
<div style='display:none'>
<div id='test' style='padding:10px; background:#fff;'>
<p>The inline option preserves bound JavaScript events and changes.</p>
</div>
</div>
</body>
</html>
jquery.colorbox.js
(function ($, document, window)
var
defaults =
html: false,
photo: false,
iframe: false,
inline: false,
transition: "elastic",
speed: 300,
fadeOut: 300,
width: false,
initialWidth: "600",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "450",
innerHeight: false,
maxHeight: false,
scrolling: true,
opacity: 0.9,
preloading: true,
className: false,
overlayClose: true,
escKey: true,
arrowKey: true,
top: false,
bottom: false,
left: false,
right: false,
fixed: false,
closeButton: true,
fastIframe: true,
open: false,
href: function()
return $(this).attr('href');
,
createIframe: function()
var iframe = document.createElement('iframe');
var attrs = $(this).data('cbox-iframe-attrs');
if (typeof attrs === 'object')
$.each(attrs, function(key, val)
iframe[key] = val;
);
return iframe;
,
colorbox = 'colorbox',
prefix = 'cbox',
boxElement = prefix + 'Element',
event_open = prefix + '_open',
event_load = prefix + '_load',
event_complete = prefix + '_complete',
event_cleanup = prefix + '_cleanup',
event_closed = prefix + '_closed',
event_purge = prefix + '_purge',
$overlay,
$box,
$wrap,
$content,
$topBorder,
$leftBorder,
$rightBorder,
$bottomBorder,
$related,
$window,
$loaded,
$loadingBay,
$loadingOverlay,
$title,
$current,
$slideshow,
$next,
$prev,
$close,
$groupControls,
$events = $('<a/>'),
settings,
interfaceHeight,
interfaceWidth,
loadedHeight,
loadedWidth,
index,
photo,
open,
active,
closing,
loadingTimer,
publicMethod,
div = "div",
requests = 0,
previousCSS = ,
init;
function $tag(tag, id, css)
var element = document.createElement(tag);
if (id)
element.id = prefix + id;
if (css)
element.style.cssText = css;
return $(element);
function winheight()
return window.innerHeight ? window.innerHeight : $(window).height();
function Settings(element, options)
if (options !== Object(options))
options = ;
this.cache = ;
this.el = element;
this.value = function(key)
var dataAttr;
if (this.cache[key] === undefined)
dataAttr = $(this.el).attr('data-cbox-'+key);
if (dataAttr !== undefined)
this.cache[key] = dataAttr;
else if (options[key] !== undefined)
this.cache[key] = options[key];
else if (defaults[key] !== undefined)
this.cache[key] = defaults[key];
return this.cache[key];
;
this.get = function(key)
var value = this.value(key);
return $.isFunction(value) ? value.call(this.el, this) : value;
;
function setSize(size, dimension)
return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10));
function setClass(str)
if (setClass.str !== str)
$box.add($overlay).removeClass(setClass.str).addClass(str);
setClass.str = str;
function getRelated(rel)
index = 0;
if (rel && rel !== false && rel !== 'nofollow')
$related = $('.' + boxElement).filter(function ()
var options = $.data(this, colorbox);
var settings = new Settings(this, options);
return (settings.get('rel') === rel);
);
index = $related.index(settings.el);
if (index === -1)
$related = $related.add(settings.el);
index = $related.length - 1;
else
$related = $(settings.el);
function trigger(event)
// for external use
$(document).trigger(event);
// for internal use
$events.triggerHandler(event);
;
function launch(element)
var options;
if (!closing)
options = $(element).data(colorbox);
settings = new Settings(element, options);
getRelated(settings.get('rel'));
if (!open)
open = active = true;
setClass(settings.get('className'));
$box.css(visibility:'hidden', display:'block', opacity:'');
$loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden');
$content.css(width:'', height:'').append($loaded);
interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();
interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
loadedHeight = $loaded.outerHeight(true);
loadedWidth = $loaded.outerWidth(true);
var initialWidth = setSize(settings.get('initialWidth'), 'x');
var initialHeight = setSize(settings.get('initialHeight'), 'y');
var maxWidth = settings.get('maxWidth');
var maxHeight = settings.get('maxHeight');
settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0);
settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0);
$loaded.css(width:'', height:settings.h);
publicMethod.position();
trigger(event_open);
settings.get('onOpen');
$groupControls.add($title).hide();
$box.focus();
if (settings.get('returnFocus'))
$events.one(event_closed, function ()
$(settings.el).focus();
);
var opacity = parseFloat(settings.get('opacity'));
$overlay.css(
opacity: opacity === opacity ? opacity : '',
cursor: settings.get('overlayClose') ? 'pointer' : '',
visibility: 'visible'
).show();
if (settings.get('closeButton'))
$close.html(settings.get('close')).appendTo($content);
else
$close.appendTo('<div/>');
load();
function appendHTML()
if (!$box)
init = false;
$window = $(window);
$box = $tag(div).attr(
id: colorbox,
'class': $.support.opacity === false ? prefix + 'IE' : '',
role: 'dialog',
tabindex: '-1'
).hide();
$overlay = $tag(div, "Overlay").hide();
$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]);
$wrap = $tag(div, "Wrapper");
$content = $tag(div, "Content").append(
$title = $tag(div, "Title"),
$current = $tag(div, "Current"),
$prev = $('<button type="button"/>').attr(id:prefix+'Previous'),
$next = $('<button type="button"/>').attr(id:prefix+'Next'),
$slideshow = $tag('button', "Slideshow"),
$loadingOverlay
);
$close = $('<button type="button"/>').attr(id:prefix+'Close');
$wrap.append(
$tag(div).append(
$tag(div, "TopLeft"),
$topBorder = $tag(div, "TopCenter"),
$tag(div, "TopRight")
),
$tag(div, false, 'clear:left').append(
$leftBorder = $tag(div, "MiddleLeft"),
$content,
$rightBorder = $tag(div, "MiddleRight")
),
$tag(div, false, 'clear:left').append(
$tag(div, "BottomLeft"),
$bottomBorder = $tag(div, "BottomCenter"),
$tag(div, "BottomRight")
)
).find('div div').css('float': 'left');
$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;');
$groupControls = $next.add($prev).add($current).add($slideshow);
if (document.body && !$box.parent().length)
$(document.body).append($overlay, $box.append($wrap, $loadingBay));
function addBindings()
function clickHandler(e)
if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey))
e.preventDefault();
launch(this);
if ($box)
if (!init)
init = true;
$next.click(function ()
publicMethod.next();
);
$prev.click(function ()
publicMethod.prev();
);
$close.click(function ()
publicMethod.close();
);
$overlay.click(function ()
if (settings.get('overlayClose'))
publicMethod.close();
);
$(document).bind('keydown.' + prefix, function (e)
var key = e.keyCode;
if (open && settings.get('escKey') && key === 27)
e.preventDefault();
publicMethod.close();
if (open && settings.get('arrowKey') && $related[1] && !e.altKey)
if (key === 37)
e.preventDefault();
$prev.click();
else if (key === 39)
e.preventDefault();
$next.click();
);
if ($.isFunction($.fn.on))
$(document).on('click.'+prefix, '.'+boxElement, clickHandler);
else
$('.'+boxElement).live('click.'+prefix, clickHandler);
return true;
return false;
if ($[colorbox])
return;
$(appendHTML);
publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback)
var settings;
var $obj = this;
options = options || ;
if ($.isFunction($obj))
$obj = $('<a/>');
options.open = true;
if (!$obj[0])
return $obj;
appendHTML();
if (addBindings())
if (callback)
options.onComplete = callback;
$obj.each(function ()
var old = $.data(this, colorbox) || ;
$.data(this, colorbox, $.extend(old, options));
).addClass(boxElement);
settings = new Settings($obj[0], options);
if (settings.get('open'))
launch($obj[0]);
return $obj;
;
publicMethod.position = function (speed, loadedCallback)
var
css,
top = 0,
left = 0,
offset = $box.offset(),
scrollTop,
scrollLeft;
$window.unbind('resize.' + prefix);
$box.css(top: -9e4, left: -9e4);
scrollTop = $window.scrollTop();
scrollLeft = $window.scrollLeft();
if (settings.get('fixed'))
offset.top -= scrollTop;
offset.left -= scrollLeft;
$box.css(position: 'fixed');
else
top = scrollTop;
left = scrollLeft;
$box.css(position: 'absolute');
if (settings.get('right') !== false)
left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.get('right'), 'x'), 0);
else if (settings.get('left') !== false)
left += setSize(settings.get('left'), 'x');
else
left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
if (settings.get('bottom') !== false)
top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.get('bottom'), 'y'), 0);
else if (settings.get('top') !== false)
top += setSize(settings.get('top'), 'y');
else
top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
$box.css(top: offset.top, left: offset.left, visibility:'visible');
$wrap[0].style.width = $wrap[0].style.height = "9999px";
function modalDimensions()
$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt($box[0].style.width,10) - interfaceWidth)+'px';
$content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt($box[0].style.height,10) - interfaceHeight)+'px';
css = width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left;
if (speed)
var tempSpeed = 0;
$.each(css, function(i)
if (css[i] !== previousCSS[i])
tempSpeed = speed;
return;
);
speed = tempSpeed;
previousCSS = css;
if (!speed)
$box.css(css);
$box.dequeue().animate(css,
duration: speed || 0,
complete: function ()
modalDimensions();
active = false;
$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
$wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
if (settings.get('reposition'))
setTimeout(function ()
$window.bind('resize.' + prefix, publicMethod.position);
, 1);
if ($.isFunction(loadedCallback))
loadedCallback();
,
step: modalDimensions
);
;
publicMethod.resize = function (options)
var scrolltop;
if (open)
options = options || ;
if (options.width)
settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
if (options.innerWidth)
settings.w = setSize(options.innerWidth, 'x');
$loaded.css(width: settings.w);
if (options.height)
settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
if (options.innerHeight)
settings.h = setSize(options.innerHeight, 'y');
if (!options.innerHeight && !options.height)
scrolltop = $loaded.scrollTop();
$loaded.css(height: "auto");
settings.h = $loaded.height();
$loaded.css(height: settings.h);
if(scrolltop)
$loaded.scrollTop(scrolltop);
publicMethod.position(settings.get('transition') === "none" ? 0 : settings.get('speed'));
;
publicMethod.prep = function (object)
if (!open)
return;
var callback, speed = settings.get('transition') === "none" ? 0 : settings.get('speed');
$loaded.remove();
$loaded = $tag(div, 'LoadedContent').append(object);
function getWidth()
settings.w = settings.w || $loaded.width();
settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
return settings.w;
function getHeight()
settings.h = settings.h || $loaded.height();
settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
return settings.h;
$loaded.hide()
.appendTo($loadingBay.show())
.css(width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden')
.css(height: getHeight())
.prependTo($content);
$loadingBay.hide();
$(photo).css('float': 'none');
setClass(settings.get('className'));
callback = function ()
var total = $related.length,
iframe,
complete;
if (!open)
return;
function removeFilter()
if ($.support.opacity === false)
$box[0].style.removeAttribute('filter');
complete = function ()
clearTimeout(loadingTimer);
$loadingOverlay.hide();
trigger(event_complete);
settings.get('onComplete');
;
$title.html(settings.get('title')).show();
$loaded.show();
if (total > 1)
if (typeof settings.get('current') === "string")
$current.html(settings.get('current').replace('current', index + 1).replace('total', total)).show();
$next[(settings.get('loop') || index < total - 1) ? "show" : "hide"]().html(settings.get('next'));
$prev[(settings.get('loop') || index) ? "show" : "hide"]().html(settings.get('previous'));
else
$groupControls.hide();
if (settings.get('iframe'))
iframe = settings.get('createIframe');
if (!settings.get('scrolling'))
iframe.scrolling = "no";
$(iframe)
.attr(
src: settings.get('href'),
'class': prefix + 'Iframe'
)
.one('load', complete)
.appendTo($loaded);
$events.one(event_purge, function ()
iframe.src = "//about:blank";
);
if (settings.get('fastIframe'))
$(iframe).trigger('load');
else
complete();
if (settings.get('transition') === 'fade')
$box.fadeTo(speed, 1, removeFilter);
else
removeFilter();
;
if (settings.get('transition') === 'fade')
$box.fadeTo(speed, 0, function ()
publicMethod.position(0, callback);
);
else
publicMethod.position(speed, callback);
;
function load ()
var href, setResize, prep = publicMethod.prep, $inline, request = ++requests;
active = true;
photo = false;
trigger(event_purge);
trigger(event_load);
settings.get('onLoad');
settings.h = settings.get('height') ?
setSize(settings.get('height'), 'y') - loadedHeight - interfaceHeight :
settings.get('innerHeight') && setSize(settings.get('innerHeight'), 'y');
settings.w = settings.get('width') ?
setSize(settings.get('width'), 'x') - loadedWidth - interfaceWidth :
settings.get('innerWidth') && setSize(settings.get('innerWidth'), 'x');
settings.mw = settings.w;
settings.mh = settings.h;
if (settings.get('maxWidth'))
settings.mw = setSize(settings.get('maxWidth'), 'x') - loadedWidth - interfaceWidth;
settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
if (settings.get('maxHeight'))
settings.mh = setSize(settings.get('maxHeight'), 'y') - loadedHeight - interfaceHeight;
settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
href = settings.get('href');
loadingTimer = setTimeout(function ()
$loadingOverlay.show();
, 100);
if (settings.get('inline'))
var $target = $(href);
$inline = $('<div>').hide().insertBefore($target);
$events.one(event_purge, function ()
$inline.replaceWith($target);
);
prep($target);
else if (settings.get('iframe'))
prep(" ");
else if (settings.get('html'))
prep(settings.get('html'));
publicMethod.next = function ()
if (!active && $related[1] && (settings.get('loop') || $related[index + 1]))
index = getIndex(1);
launch($related[index]);
;
publicMethod.close = function ()
if (open && !closing)
closing = true;
open = false;
trigger(event_cleanup);
settings.get('onCleanup');
$window.unbind('.' + prefix);
$overlay.fadeTo(settings.get('fadeOut') || 0, 0);
$box.stop().fadeTo(settings.get('fadeOut') || 0, 0, function ()
$box.hide();
$overlay.hide();
trigger(event_purge);
$loaded.remove();
setTimeout(function ()
closing = false;
trigger(event_closed);
settings.get('onClosed');
, 1);
);
;
publicMethod.element = function ()
return $(settings.el);
;
(jQuery, document, window));
第2页
<html>
<head>
<meta charset=utf-8"/>
<title></title>
</head>
<body>
dfdfdffdfdfdf
</body>
</html>
我想把html page2的内容整合到page1的一个灯箱上
【问题讨论】：
【参考方案1】：尝试使用它，
iframe: true，当$(document).ready函数
【讨论】：
以上是关于在灯箱上集成网页内容页面的主要内容，如果未能解决你的问题，请参考以下文章