Ändra stil på extern sida i frame?

10 svar · 317 visningar · startad av Jesper T 7 okt. 2003

Jesper TMedlem sedan nov. 20017 144 inlägg

Trådstart7 okt. 2003 11:56#1

Går det på någe vis att ändra stil på en extern sida i en frame om man vet vad elementklassen heter?

Ex. i framen så öppnas en sida med ett antal divar. Dessa har på denna sida en svart ram. Nu vill jag att ramen/arna skall förefalla röda i min frame.
(divarnas class är "divinfo")

PalleMedlem sedan apr. 20003 174 inlägg

7 okt. 2003 12:15#2

Jorå det går.
Nu ska vi se om jag förstod dig rätt..

[red]<html>
<body>

<iframe src="frame.htm" name="foo"></iframe>
<p>
	<a href="javascript:void(parent.foo.bar.className='divinfo_red');">Röd ram</a> | 
	<a href="javascript:void(parent.foo.bar.className='divinfo');">Svart ram</a>
</p>

</body>
</html>[/red]

Iframe´n:

[red]<html>
<head>

	<style type="text/css">
		.divinfo { border: 1px solid #000; }
		.divinfo_red { border: 1px solid red; }
	</style>

</head>
<body>

	<div class="divinfo" id="bar">
		Hybrid-DNA-tekniken fick sitt genombrott 1953.
	</div>

</body>
</html>[/red]

Jesper TMedlem sedan nov. 20017 144 inlägg

7 okt. 2003 12:22#3

Nästan....
Jag hade tänkt alla objekt med ett visst klassnamn och inte ett specifikt id.
Dessutom så skulle det vara extra bra om styletaggarna låg på sidan med iframen.(kanske inte går)

PalleMedlem sedan apr. 20003 174 inlägg

7 okt. 2003 12:36#4

Ok, det där är överkurs för mig.

Ta en titt här kanske:
http://www.webforum.nu/showthread.php?s=&postid=686211#post686211

Jesper TMedlem sedan nov. 20017 144 inlägg

7 okt. 2003 22:38#5

Någon med mer erfarenhet(läs jojoxx, peter s, mfl.) kanske kan svara på frågan om det överhuvud taget är möjligt. Så kanske jag kan lista ut resten....

JojoxxMedlem sedan juni 20004 308 inlägg

8 okt. 2003 05:43#6

Jag trodde du provade länken ovan

Har moddat exemplet lite:

<script type="text/javascript">
function getStyleClassByName(className){
	if(document.all){
		for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<foo.document.styleSheets[styleSheet].rules.length;rule++){
				if(foo.document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].rules[rule]; }
			}
		}
	} else if(document.getElementById){
		for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<foo.document.styleSheets[styleSheet].cssRules.length;rule++){
				if(foo.document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].cssRules[rule]; }
			}
		}
	}
	return null;
}
</script>
<a href="#" onClick="getStyleClassByName('minklass').style.color='blue';">Blå</a>
<iframe src="iframe.html" name="foo" width="400" height="300"></iframe>

Sidan "iframe.html" innehåller alltså en klass vid namn "minklass" som du ändrar egenskaper för. Jag har inte provat, men dokumenten måste antagligen ligga på samma domän för att du skall ha rättighet att ändra egenskaperna.

Jesper TMedlem sedan nov. 20017 144 inlägg

8 okt. 2003 13:41#7

Ja, precis, jag fick "Åtkomst nekad" när jag testade med en extern sida. Men jag skall testa hur det blir om jag gör der på en och samma domän.
Testade med:

<a href="#" onClick="getStyleClassByName('divinfo').className='blueborder';">Blå</a>

Men fick ett fel. Går det att göra samma sak på ett sätt som funkar?

JojoxxMedlem sedan juni 20004 308 inlägg

8 okt. 2003 14:00#8

Mmm... men det är inte klassen som du vill byta namn på, utan ett elements klasstillhörighet, så då blir det;

onClick="parent.document.getElementById('divinfo').className='blueborder';"

"blueborder" måste vara en definierad klass i det dokumentet.

Jesper TMedlem sedan nov. 20017 144 inlägg

8 okt. 2003 14:05#9

men....getElementById, då måste väl elementet ha ett specifikt id?
I annat fall skulle det funka görbra med "getStyleClassByName('minklass').style.color='blue';" om man kunde ändra ramfärgen istället för typsnittsfärgen.

JojoxxMedlem sedan juni 20004 308 inlägg

8 okt. 2003 14:19#10

Visst. Använd borderColor istället för color

Jesper TMedlem sedan nov. 20017 144 inlägg

8 okt. 2003 14:32#11

Jasså, det var inte svårare.
Tack, igen då.
Det blev så här:

<script type="text/javascript">
function getStyleClassByName(className){
	if(document.all){
		for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<foo.document.styleSheets[styleSheet].rules.length;rule++){
				if(foo.document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].rules[rule]; }
			}
		}
	} else if(document.getElementById){
		for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<foo.document.styleSheets[styleSheet].cssRules.length;rule++){
				if(foo.document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].cssRules[rule]; }
			}
		}
	}
	return null;
}
function red(className){
getStyleClassByName(className).style.borderColor='blue';
getStyleClassByName(className).style.borderStyle='dotted';
}
</script>

<iframe src="iframe.html" name="foo" width="400" height="200"></iframe>
<p>

<a href="#" onClick="red('divinfo');">Blå, med prickar</a>