webForumDet fria alternativet
Logga in

tvinga att visa utanför iframe

18 svar · 675 visningar · startad av Gimbo

GimboMedlem sedan dec. 20001 626 inlägg
#1

tja,

såg detta häftiga script:
http://orangoo.com/labs/GreyBox/

men nu är min fråga om jag har bilderna i en iframe går det att göra så att då man klickar på bilden att den uppfyller samma funktion som den gör nu och inte att den görs enbart i iframen?

Hoppas ni har någon lösning, för det står helt still för mig...

GimboMedlem sedan dec. 20001 626 inlägg
#2

ingen?

yohpopsMedlem sedan feb. 20011 198 inlägg
#3

Jag skulle inte tro det.
Tanken är ju att visa andra sidor i en rutan.
Känner du till något annat element som klarar det förutom iframe?

GimboMedlem sedan dec. 20001 626 inlägg
#4

nope, inte vad jag känner till, men det borde väl finnas ngt onclick som tvingar ut händelsen i main browsern?

jawbreakerMedlem sedan jan. 2003296 inlägg
#5

Nu har jag inte använt GreyBox till något, men efter att ha sneglat lite på sidan tycker jag att följande borde fungera:

Inkludera alla javascript i din huvudsida (alltså den sida som innehåller din iframe). Typ...

<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

Och i din sida med alla bilder (alltså den sida som visas i iframen):

<a href="static_files/night_valley.jpg" onclick="return parent.GB_showImage('Min bildtext', this.href);" title="Night valley">
	<img src="static_files/night_valley_thumb.jpg" />
</a>
GimboMedlem sedan dec. 20001 626 inlägg
#6

ok det kanske skulel fungera, jag har inte testat koden du gav mig, men det jag vill göra är att infoga alla javascripts filer i min iframe sida och inte i själva huvudsidan.
dvs att all kod (samt bilder) skall finnas i iframe sidan fast uppfylla samma funktion som om det inte fanns någon iframe.

GimboMedlem sedan dec. 20001 626 inlägg
#7

jag kan ju bifoga javascriptet som bestämmer hur det skall se ut:

var GB_CURRENT=null;
GB_hide=function(){
GB_CURRENT.hide();
};
GreyBox=new AJS.Class({init:function(_1){
this.use_fx=AJS.fx;
this.type="page";
this.overlay_click_close=false;
this.salt=0;
this.root_dir=GB_ROOT_DIR;
this.callback_fns=[];
this.reload_on_close=false;
this.src_loader=this.root_dir+"loader_frame.html";
var _2=window.location.hostname.indexOf("www");
var _3=this.src_loader.indexOf("www");
if(_2!=-1&&_3==-1){
this.src_loader=this.src_loader.replace("://","://www.");
}
if(_2==-1&&_3!=-1){
this.src_loader=this.src_loader.replace("://www.","://");
}
this.show_loading=true;
AJS.update(this,_1);
},addCallback:function(fn){
if(fn){
this.callback_fns.push(fn);
}
},show:function(_5){
GB_CURRENT=this;
this.url=_5;
var _6=[AJS.$bytc("object"),AJS.$bytc("select")];
AJS.map(AJS.flattenList(_6),function(_7){
_7.style.visibility="hidden";
});
this.createElements();
return false;
},hide:function(){
var _8=this.callback_fns;
if(_8!=[]){
AJS.map(_8,function(fn){
fn();
});
}
this.onHide();
if(this.use_fx){
var _a=this.overlay;
AJS.fx.fadeOut(this.overlay,{onComplete:function(){
AJS.removeElement(_a);
_a=null;
},duration:300});
AJS.removeElement(this.g_window);
}else{
AJS.removeElement(this.g_window,this.overlay);
}
this.removeFrame();
AJS.REV(window,"scroll",_GB_setOverlayDimension);
AJS.REV(window,"resize",_GB_update);
var _b=[AJS.$bytc("object"),AJS.$bytc("select")];
AJS.map(AJS.flattenList(_b),function(_c){
_c.style.visibility="visible";
});
GB_CURRENT=null;
if(this.reload_on_close){
window.location.reload();
}
},update:function(){
this.setOverlayDimension();
this.setFrameSize();
this.setWindowPosition();
},createElements:function(){
this.initOverlay();
this.g_window=AJS.DIV({"id":"GB_window"});
AJS.hideElement(this.g_window);
AJS.getBody().insertBefore(this.g_window,this.overlay.nextSibling);
this.initFrame();
this.initHook();
this.update();
var me=this;
if(this.use_fx){
AJS.fx.fadeIn(this.overlay,{duration:300,to:0.7,onComplete:function(){
me.onShow();
AJS.showElement(me.g_window);
me.startLoading();
}});
}else{
AJS.setOpacity(this.overlay,0.7);
AJS.showElement(this.g_window);
this.onShow();
this.startLoading();
}
AJS.AEV(window,"scroll",_GB_setOverlayDimension);
AJS.AEV(window,"resize",_GB_update);
},removeFrame:function(){
try{
AJS.removeElement(this.iframe);
}
catch(e){
}
this.iframe=null;
},startLoading:function(){
this.iframe.src=this.src_loader+"?s="+this.salt++;
AJS.showElement(this.iframe);
},setOverlayDimension:function(){
var _e=AJS.getWindowSize();
if(AJS.isMozilla()||AJS.isOpera()){
AJS.setWidth(this.overlay,"100%");
}else{
AJS.setWidth(this.overlay,_e.w);
}
var _f=Math.max(AJS.getScrollTop()+_e.h,AJS.getScrollTop()+this.height);
if(_f<AJS.getScrollTop()){
AJS.setHeight(this.overlay,_f);
}else{
AJS.setHeight(this.overlay,AJS.getScrollTop()+_e.h);
}
},initOverlay:function(){
this.overlay=AJS.DIV({"id":"GB_overlay"});
if(this.overlay_click_close){
AJS.AEV(this.overlay,"click",GB_hide);
}
AJS.setOpacity(this.overlay,0);
AJS.getBody().insertBefore(this.overlay,AJS.getBody().firstChild);
},initFrame:function(){
if(!this.iframe){
var d={"name":"GB_frame","class":"GB_frame","frameBorder":0};
this.iframe=AJS.IFRAME(d);
this.middle_cnt=AJS.DIV({"class":"content"},this.iframe);
this.top_cnt=AJS.DIV();
this.bottom_cnt=AJS.DIV();
AJS.ACN(this.g_window,this.top_cnt,this.middle_cnt,this.bottom_cnt);
}
},onHide:function(){
},onShow:function(){
},setFrameSize:function(){
},setWindowPosition:function(){
},initHook:function(){
}});
_GB_update=function(){
if(GB_CURRENT){
GB_CURRENT.update();
}
};
_GB_setOverlayDimension=function(){
if(GB_CURRENT){
GB_CURRENT.setOverlayDimension();
}
};
AJS.preloadImages(GB_ROOT_DIR+"indicator.gif");
script_loaded=true;
var GB_SETS={};
function decoGreyboxLinks(){
var as=AJS.$bytc("a");
AJS.map(as,function(a){
if(a.getAttribute("href")&&a.getAttribute("rel")){
var rel=a.getAttribute("rel");
if(rel.indexOf("gb_")==0){
var _14=rel.match(/\w+/)[0];
var _15=rel.match(/\[(.*)\]/)[1];
var _16=0;
var _17={"caption":a.title||"","url":a.href};
if(_14=="gb_pageset"||_14=="gb_imageset"){
if(!GB_SETS[_15]){
GB_SETS[_15]=[];
}
GB_SETS[_15].push(_17);
_16=GB_SETS[_15].length;
}
if(_14=="gb_pageset"){
a.onclick=function(){
GB_showFullScreenSet(GB_SETS[_15],_16);
return false;
};
}
if(_14=="gb_imageset"){
a.onclick=function(){
GB_showImageSet(GB_SETS[_15],_16);
return false;
};
}
if(_14=="gb_image"){
a.onclick=function(){
GB_showImage(_17.caption,_17.url);
return false;
};
}
if(_14=="gb_page"){
a.onclick=function(){
var sp=_15.split(/, ?/);
GB_show(_17.caption,_17.url,parseInt(sp[1]),parseInt(sp[0]));
return false;
};
}
if(_14=="gb_page_fs"){
a.onclick=function(){
GB_showFullScreen(_17.caption,_17.url);
return false;
};
}
if(_14=="gb_page_center"){
a.onclick=function(){
var sp=_15.split(/, ?/);
GB_showCenter(_17.caption,_17.url,parseInt(sp[1]),parseInt(sp[0]));
return false;
};
}
}
}
});
}
AJS.AEV(window,"load",decoGreyboxLinks);
GB_showImage=function(_1a,url,_1c){
var _1d={width:300,height:300,type:"image",fullscreen:false,center_win:true,caption:_1a,callback_fn:_1c};
var win=new GB_Gallery(_1d);
return win.show(url);
};
GB_showPage=function(_1f,url,_21){
var _22={type:"page",caption:_1f,callback_fn:_21,fullscreen:true,center_win:false};
var win=new GB_Gallery(_22);
return win.show(url);
};
GB_Gallery=GreyBox.extend({init:function(_24){
this.parent({});
this.img_close=this.root_dir+"g_close.gif";
AJS.update(this,_24);
this.addCallback(this.callback_fn);
},initHook:function(){
AJS.addClass(this.g_window,"GB_Gallery");
var _25=AJS.DIV({"class":"inner"});
this.header=AJS.DIV({"class":"GB_header"},_25);
AJS.setOpacity(this.header,0);
AJS.getBody().insertBefore(this.header,this.overlay.nextSibling);
var _26=AJS.TD({"id":"GB_caption","class":"caption","width":"40%"},this.caption);
var _27=AJS.TD({"id":"GB_middle","class":"middle","width":"20%"});
var _28=AJS.IMG({"src":this.img_close});
AJS.AEV(_28,"click",GB_hide);
var _29=AJS.TD({"class":"close","width":"40%"},_28);
var _2a=AJS.TBODY(AJS.TR(_26,_27,_29));
var _2b=AJS.TABLE({"cellspacing":"0","cellpadding":0,"border":0},_2a);
AJS.ACN(_25,_2b);
if(this.fullscreen){
AJS.AEV(window,"scroll",AJS.$b(this.setWindowPosition,this));
}else{
AJS.AEV(window,"scroll",AJS.$b(this._setHeaderPos,this));
}
},setFrameSize:function(){
var _2c=this.overlay.offsetWidth;
var _2d=AJS.getWindowSize();
if(this.fullscreen){
this.width=_2c-40;
this.height=_2d.h-80;
}
AJS.setWidth(this.iframe,this.width);
AJS.setHeight(this.iframe,this.height);
AJS.setWidth(this.header,_2c);
},_setHeaderPos:function(){
AJS.setTop(this.header,AJS.getScrollTop()+10);
},setWindowPosition:function(){
var _2e=this.overlay.offsetWidth;
var _2f=AJS.getWindowSize();
AJS.setLeft(this.g_window,((_2e-50-this.width)/2));
var _30=AJS.getScrollTop()+55;
if(!this.center_win){
AJS.setTop(this.g_window,_30);
}else{
var fl=((_2f.h-this.height)/2)+20+AJS.getScrollTop();
if(fl<0){
fl=0;
}
if(_30>fl){
fl=_30;
}
AJS.setTop(this.g_window,fl);
}
this._setHeaderPos();
},onHide:function(){
AJS.removeElement(this.header);
AJS.removeClass(this.g_window,"GB_Gallery");
},onShow:function(){
if(this.use_fx){
AJS.fx.fadeIn(this.header,{to:1});
}else{
AJS.setOpacity(this.header,1);
}
}});
AJS.preloadImages(GB_ROOT_DIR+"g_close.gif");
GB_showFullScreenSet=function(set,_33,_34){
var _35={type:"page",fullscreen:true,center_win:false};
var _36=new GB_Sets(_35,set);
_36.addCallback(_34);
_36.showSet(_33-1);
return false;
};
GB_showImageSet=function(set,_38,_39){
var _3a={type:"image",fullscreen:false,center_win:true,width:300,height:300};
var _3b=new GB_Sets(_3a,set);
_3b.addCallback(_39);
_3b.showSet(_38-1);
return false;
};
GB_showFullScreen=function(_50,url,_52){
var _53={caption:_50,fullscreen:true,callback_fn:_52};
var win=new GB_Window(_53);
return win.show(url);
};
},setFrameSize:function(){
if(this.fullscreen){
var _5b=AJS.getWindowSize();
overlay_h=_5b.h;
this.width=Math.round(this.overlay.offsetWidth-(this.overlay.offsetWidth/100)*10);
this.height=Math.round(overlay_h-(overlay_h/100)*10);
}
AJS.setWidth(this.header,this.width+6);
AJS.setWidth(this.iframe,this.width);
AJS.setHeight(this.iframe,this.height);
},setWindowPosition:function(){
var _5c=AJS.getWindowSize();
AJS.setLeft(this.g_window,((_5c.w-this.width)/2)-13);
if(!this.center_win){
AJS.setTop(this.g_window,AJS.getScrollTop());
}else{
var fl=((_5c.h-this.height)/2)-20+AJS.getScrollTop();
if(fl<0){
fl=0;
}
AJS.setTop(this.g_window,fl);
}
}});
AJS.preloadImages(GB_ROOT_DIR+"w_close.gif",GB_ROOT_DIR+"header_bg.gif");
jawbreakerMedlem sedan jan. 2003296 inlägg
#8

Ojojoj, mycket kod :) Har inte riktigt tid att sätta mig in i det där nu på arbetstid.
Men varför går det inte att inkludera javascriptfilerna i huvudfönstret om jag får fråga?

Det skulle väl gå att från sidan som visas i iframe:n ladda in javascriptfilerna (och cssfilen) i huvudfönstret:

<script type="text/javascript">
if (!parent.GB_ROOT_DIR)
{
	parent.GB_ROOT_DIR = "./greybox/";

	var e = parent.document.createElement("script");
	e.src = "greybox/AJS.js";
	e.type="text/javascript";
	parent.document.getElementsByTagName("head")[0].appendChild(e);

	e = parent.document.createElement("script");
	e.src = "greybox/AJS_fx.js";
	e.type="text/javascript";
	parent.document.getElementsByTagName("head")[0].appendChild(e);

	e = parent.document.createElement("script");
	e.src = "greybox/gb_scripts.js";
	e.type="text/javascript";
	parent.document.getElementsByTagName("head")[0].appendChild(e);

	e = parent.document.createElement("link");
	e.rel = "stylesheet";
	e.href = "greybox/gb_styles.css";
	e.type = "text/css";
	parent.document.getElementsByTagName("head")[0].appendChild(e);
}
</script>

Då inkluderar du egentligen filerna i huvudfönstret, men du slipper lägga till någon kod där - all nödvändig kod ligger i iframe:n. Annars blir det väl till att hacka i koden du postade, men det har jag inte tid med just nu som sagt var.

GimboMedlem sedan dec. 20001 626 inlägg
#9

grymt! tack för din hjälp ska testa koden senare... så det den koden gör är att den låter scripten köras i huvudfönstret istället för iframen? men hur vet den att det är huvudfönstret? är det parent.document.getElementsByTagName("head")[0].appendChild(e);
som bestämmer det?

ska testa det senare och återkomma :)

GimboMedlem sedan dec. 20001 626 inlägg
#10

hmm verkar inte fungera, så här ser min kod ut:
huvud fönstret index.htm

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny sida 1</title>
</head>

<body>
<iframe width=400 height=300 src="examples.html"></iframe>
</body>

</html>

sidan examples.html där bilderna listas ser ut på följande vis, måste jag inte ha någon onclick på bilden för att den ska ta effekt på huvudfönstret?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>GreyBox - Examples</title>

    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

    <script type="text/javascript" src="static_files/help.js"></script>
    <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" />

	    <script type="text/javascript">
	if (!parent.GB_ROOT_DIR)
	{
		parent.GB_ROOT_DIR = "./greybox/";
	
		var e = parent.document.createElement("script");
		e.src = "greybox/AJS.js";
		e.type="text/javascript";
		parent.document.getElementsByTagName("head")[0].appendChild(e);
	
		e = parent.document.createElement("script");
		e.src = "greybox/AJS_fx.js";
		e.type="text/javascript";
		parent.document.getElementsByTagName("head")[0].appendChild(e);
	
		e = parent.document.createElement("script");
		e.src = "greybox/gb_scripts.js";
		e.type="text/javascript";
		parent.document.getElementsByTagName("head")[0].appendChild(e);
	
		e = parent.document.createElement("link");
		e.rel = "stylesheet";
		e.href = "greybox/gb_styles.css";
		e.type = "text/css";
		parent.document.getElementsByTagName("head")[0].appendChild(e);
	}
	</script>
</head>
<body>

<script>
    insertHeader();
    insertMenu('examples');
</script>

<h3>One website</h3>
<ul>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_page_center[640, 480]">Launch google.com in a 640x480 window</a>
    </li>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>
    </li>
</ul>

<h3>Website gallery</h3>
<ul>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_pageset[search_sites]">Launch Google search</a>
    </li>
    <li>
        <a href="http://search.yahoo.com/" rel="gb_pageset[search_sites]">Launch Yahoo search</a> 
    </li>
    <li>
        <a href="http://www.koders.com/" rel="gb_pageset[search_sites]">Launch Koders search</a>
    </li>
</ul>
<h3>Image gallery</h3>
<script type="text/javascript">
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
                 {'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>

<ul>
    <li>
        <a href="#" onclick="return GB_showImageSet(image_set, 1)">Launch gallery</a>
    </li>

    <li>
        <a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley" target=_blank>
            <img src="static_files/night_valley_thumb.jpg" />
        </a>
    </li>

    <li>
        <a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
            <img src="static_files/salt_thumb.gif" />
        </a>
    </li>
</ul>
<h3>Without loading</h3>
<script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 500,
        fullscreen: true,
        show_loading: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}
</script>
<ul>
    <li>
        <a href="http://google.com/" onclick="return GB_myShow('Google', this.href)">Visit Google without loading</a>
    </li>
</ul>

</body>
</html>

den vill fortfarande bara köra scriptet i iframen? och bryter inte ut den?

jawbreakerMedlem sedan jan. 2003296 inlägg
#11

Du kan inte använda rel="..." på dina länkar längre, utan du får köra javascriptfunktionerna direkt från länkarna istället (genom onclick-eventet) och då använda parent.funktionsnamn för att tala om att det är funktionerna i huvudfönstret du ska köra, typ:

<a href="http://google.com/" title="Google" onclick="return parent.GB_showCenter('Google', this.href, 640, 480);">Launch google.com in a 640x480 window</a>
GimboMedlem sedan dec. 20001 626 inlägg
#12

OTROLIGT grymt TACKAR!!

jawbreakerMedlem sedan jan. 2003296 inlägg
#13

Varsågod :)

GimboMedlem sedan dec. 20001 626 inlägg
#14

Vet att jag stängt denna tråd tidigare och allt fungerar om bägge filerna ligger på samma server, men måste fråga en sak jag får felet åtkomst nekad, så filen som ligger i iframen ligger på en annan server?

så huvudfilen ligger på en server och filen som ligger i iframen på en annan då får jag fel?

är det något med if (!parent.GB_ROOT_DIR) man måste ändra?

Peter SMedlem sedan dec. 20025 483 inlägg
#15

Du kan inte referera och manipulera objekt som ligger på en annan domän. M.a.o. måste sidan i <iframe>en och huvudsidan ligga under samma domän.

GimboMedlem sedan dec. 20001 626 inlägg
#16

vill inte manipulera något utan vill bara att scriptet skall köras, konstigt att man får åtkomst nekat? kan det va behörighets problem? alltså det är jag som har bägga servrarna, så det är inget skumt jag försöker hålla på med om ni undrar det, utan vill göra detta för att ena sidan styrs av en cms som har vissa restriktioner.

Peter SMedlem sedan dec. 20025 483 inlägg
#17

Problemet är att parentsidan inte ligger på samma domän. Felet uppkommer när du försöker manipulera den sidans DOM-struktur.

GimboMedlem sedan dec. 20001 626 inlägg
#18

ok, absolut inget man kan göra?

Peter SMedlem sedan dec. 20025 483 inlägg
#19

Inte om de ligger under olika domäner. Är det subdomäner du vill accessa kanske det går.

141 ms totalt · 3 externa anrop · v20260731065814-full.ca5a5675
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)