jQuery iFrame Auto Width And Height Form
Ik heb een kleine vraagje dat misschien lastig kan overkomen. Momenteel ben ik op zoek naar een jQuery plugin voor iFrame-form op andermans website die automatisch breede en hoogte meeneemt. Ik zal het proberen zo goed mogelijk uit te leggen.
Op mijn website heb ik een zoekbalk, ongeveer 5 inputs naast elkaar waar je gegevens invult om dan vervolgens een lijst met prijzen van verschillende aanbieders. Ik wil dus een iFrame op website van een partner door middel van iframe en de zoekbalk moet dus zichtbaar op zijn website (Alleen de classname van div waar de zoekblak/form mee begint en eindigt op </div>, ik heb hierover gelezen dat met contents(); mogelijk is van jQuery, zie: http://api.jquery.com/contents/), maar als een consument gegevens invult en vervolgens op button klikt, moet ie dus automatisch lijst uitrekken met jQuery van alle aanbieders, tot max hoogte dat ik opgegeven hebt. Het lastige hierbij is ook cross domain, omdat het niet zomaar toegestaan wordt door browsers dat je met javascript iframe plaatst. Ik heb hierover al veel informatie gezocht en van alles geprobeerde om juiste code in elkaar te krijgen, maar het lukte steeds niet erg goed, omdat mijn ervaring in jQuery maar heel beperkt is. Als iemand hiermee bekend is, laat me maar weten! Alvast bedankt!
Gewijzigd op 20/09/2013 10:47:45 door DavY -
De bron van die iframe beslist zelf hoe de stijl er uit ziet.
Nu, mocht die iframe input's hebben met width=100% van de window, is je probleem opgelost; maar daar beslis jij niet over.
Kan je vertellen over welke site het gaat? Kunnen we misschien toch proberen...
Je hebt gelijk, dat gaat zo niet werken. Na heleboel informatie gezocht en discusses gelezen te hebben is enige optie om automatisch breede en hoogte te doen in iframe met jQuery door naar een element te zoeken. Eerste is gelukt (Min of meer), maar nu stuit ik op klein probleempje. Hij rekt hem niet automatisch uit als een consument naar een ander pagina gaat en er een lijst te voorschijn komt. Ik maak gebruik van Fancybox en mijn params ziet er als volgt uit:
Code (php)
1
// old
Iemand ervaring met Fancybox?
Update: Ik heb eindelijk de juist code in elkaar kunnen krijgen, maar het werkt jammer genoeg alleen in je eigen server, maar als ik een iframe naar ander website wilt sturen, krijg ik dit melding:
Code (php)
1
2
3
4
2
3
4
Error: Permission denied to access property 'document'
elem.contentDocument || elem.contentWindow.document :
elem.contentDocument || elem.contentWindow.document :
Mijn code ziet er nu als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
$("a.fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
fitToView: false,
nextSpeed: 0,
prevSpeed: 0,
beforeShow: function(){
this.width = ($('.fancybox-iframe').contents().find('html').width())+50;
this.height = ($('.fancybox-iframe').contents().find('html').height())+50;
}
});
});
$("a.fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
fitToView: false,
nextSpeed: 0,
prevSpeed: 0,
beforeShow: function(){
this.width = ($('.fancybox-iframe').contents().find('html').width())+50;
this.height = ($('.fancybox-iframe').contents().find('html').height())+50;
}
});
});
Gewijzigd op 20/09/2013 21:07:35 door DavY -