De PHPhulp kroeg
iframe
ik wil graag een klein stukje website op een andere website plaatsen. Het is een fixed stukje website, en wil dus met een paar regels kunnen plaatsen. hoe werkt iframe precies, en hoe kan mijn website daarin doen?
mvg jeremy
<img src="mijn_afbeelding.jpg">
->
<iframe src="mijn_iframe.php">
Dus, met css vertel je hoe de image/iframe in de pagina moet passen. Width, height, border ...
De src vertelt dan weer wat er binnenin gebeurt.
Na het laden van de hoofdpagina zal het element zelf op zoek gaan naar de source (src)
En dan moet je zien voor knoppen/links op de hoofdpagina, en hoe je daarmee de navigatie van de iframe kan regelen.
Simpel voorbeeld
http://www.developphp.com/view_lesson.php?v=141
let op <iframe name="mijn_iframe"> en <a target="mijn_iframe">
Jerry php op 03/06/2013 16:05:18:
Ja, maar als ik iframe gebruik met de index.php als src, dan doet verder mijn javascript in dat zelfde mapje het niet..
En gelukkig ook maar. Wel bestaat er een sandbox-parameter, welke het mogelijk maakt:
http://www.w3schools.com/tags/att_iframe_sandbox.asp
de pagina binnenin de iframe is een pagina op zich. javascript, css, ... die te maken heeft met met de inhoud van de pagina moeten op die pagina zelf worden geregeld.
Je kan wel communiceren tussen het hoofd-window en de iframe-window, met javascript. Er is wel 1 voorwaarde: de hoofdpagina en de iframe inhoud moeten op het zelfde domein staan, anders werkt de communicatie niet (of je moet toch heel erg prutsen)
- Geef eens een voorbeeld van die javascript code die niet werkt.
- Staat die iframe op het zelfde domein?
<iframe src="http://www.MIJNDOMEIN.nl/test1/index.php" height="100%" frameborder="0" width="100%"></iframe>
Dat heb ik nu. En nu is het de bedoeling dat index.php gewoon de main.js kan uitlezen als het gevragen wordt.
Toevoeging op 03/06/2013 16:19:43:
Kris, het is wel de bedoeling dat bijvoorbeeld jij op je website, mijn iframe kan gaan gebruiken. Javascript zoals bijvoorbeeld kleine hovers etc.
Gewijzigd op 03/06/2013 16:20:40 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$('#social').click(function(){
if($('#popupSocial').is(':visible')) {
$('#popupSocial').hide();
}else{
checkVisibleForSocial();
$('#popupSocial').show();
}
});
if($('#popupSocial').is(':visible')) {
$('#popupSocial').hide();
}else{
checkVisibleForSocial();
$('#popupSocial').show();
}
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Create iframe
if (!document.getElementById('_BH_frame') && bhNotInParent === false) {
// Inject the CSS
var c = document.createElement('link');
c.type = "text/css";
c.rel = "stylesheet";
c.href = bh.guiCSS;
c.id = "_BH_CSS";
head.appendChild(c);
var iframe = document.createElement('iframe');
// Create our bugherd container iframe
iframe.setAttribute("style","display:block !important;border:0 !important;overflow:hidden" +
"!important;position:absolute !important;right:0px !important;position:fixed !important;top:0px" +
"!important;overflow:hidden !important;width:0%;background-color:transparent !important;");
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('border', '0');
iframe.setAttribute('allowTransparency', 'true');
iframe.setAttribute('id', '_BH_frame');
iframe.setAttribute('name', '_BH_frame');
iframe.setAttribute('scrolling', 'no');
document.body.appendChild(iframe);
// Apply
bh.iframe = iframe;
bh.win = iframe.contentWindow;
bh.doc = bh.win.document;
bh.doc.open().write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' +
'<html><head><title>BugHerd Sidebar</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css"></head><body onload="parent.window._bugHerd.loaded()">' +
bh.data.h + '</body></html>');
bh.doc.close();
// Avoid webkit bug which scrolls infinite to the top margin of the iframe
bh.win.scroll(0,0);
if (!document.getElementById('_BH_frame') && bhNotInParent === false) {
// Inject the CSS
var c = document.createElement('link');
c.type = "text/css";
c.rel = "stylesheet";
c.href = bh.guiCSS;
c.id = "_BH_CSS";
head.appendChild(c);
var iframe = document.createElement('iframe');
// Create our bugherd container iframe
iframe.setAttribute("style","display:block !important;border:0 !important;overflow:hidden" +
"!important;position:absolute !important;right:0px !important;position:fixed !important;top:0px" +
"!important;overflow:hidden !important;width:0%;background-color:transparent !important;");
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('border', '0');
iframe.setAttribute('allowTransparency', 'true');
iframe.setAttribute('id', '_BH_frame');
iframe.setAttribute('name', '_BH_frame');
iframe.setAttribute('scrolling', 'no');
document.body.appendChild(iframe);
// Apply
bh.iframe = iframe;
bh.win = iframe.contentWindow;
bh.doc = bh.win.document;
bh.doc.open().write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' +
'<html><head><title>BugHerd Sidebar</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css"></head><body onload="parent.window._bugHerd.loaded()">' +
bh.data.h + '</body></html>');
bh.doc.close();
// Avoid webkit bug which scrolls infinite to the top margin of the iframe
bh.win.scroll(0,0);