Elementen binnen iFrame mbv javascript aanspreken

[digital-IMEI]

Hey mensen,

ik zit even met een javascript uitdaging. Ik ben bezig met een Facebook Tab waarbij feitelijk een website in een iframe wordt weergegeven binnen een Facebook Tab.

Nu is de website zo goed als klaar en werkt hij ook perfect zolang je hem niet in een iframe bekijkt, zodra ik hem via Facebook (dus in een iframe) bekijk gaat het mis met de Facebook Registration Plugin. Hier zit namelijk een klein stukje validatie bij die errors geeft omdat hij de Facebook pagina blijkbaar aanspreekt en niet binnen het iframe werkt.

Ik heb gezocht op internet maar kan alleen maar dingen vinden om javascript juist tussen meerdere iframes te laten werken ipv binnen 1 iframe te laten werken en ik hoop dus dat jullie mij verder kunnen helpen.

Google Chrome error:

Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/pages/pagina-naam/paginaid?sk=app_id from frame with URL http://www.bronvaniframe.nl. Domains, protocols and ports must match.

Facebook Registration Plugin

JavaScript:

    <fb:registration
            fields="[{'name':'name'}, 
            {'name':'gender'},
            {'name':'first_name'},
            {'name':'last_name'},
            {'name':'email', 'description':'Email adres'},
            {'name':'location', 'description':'Woonplaats'},
            {'name':'phone', 'description':'Telefoonnummer', 'type':'text'}, 
            {'name':'voorwaarden', 'description':'Ik ga akkoord met de algemene voorwaarden', 'type':'checkbox'}]" 
            fb_only="true"
            fb_register="true"
            width="520"
            height="390"
            border_color="white"
            target="_top"
            onvalidate="validate">
    </fb:registration>

Facebook Client side validation

JavaScript:

    function validate(form) {
          errors = {};
           if (form.phone.length < 8) {
            errors.phone = "Vul een geldig telefoonnummer in";
          }
          if (!form.voorwaarden) {
            errors.voorwaarden = "U dient akkoord te gaan met de algemene voorwaarden";
          }
          return errors;
        }

[MueR]

Je probleem is de Same Origin Policy. Dat ga je niet op kunnen lossen zolang je gebruik wil maken van die Facebook code.

[Janoz]

Hij wil wat aanroepen op de facebook pagina, en dat mag natuurlijk niet (zie error). Dat het wel werkt wanneer je de pagina los opent laat wel zien dat die actie helemaal niet nodig is voor de werking van de pagina. Ik vermoed dan ook dat het hier om een configuratie fout gaat. Als ik vervolgens even kijk naar de configuratie van de facebook plugin dan zie ik daar een target="_top". Ik kan me heel goed voorstellen dat dat eigenlijk iets anders moet zijn wanner je je eigen pagina in een iFrame hebt draaien.


----
Na wat rondlezen op de facebook pagina zal die _top waarschijnlijk _parent of _self moeten zijn.

[ Voor 9% gewijzigd door Janoz op 16-09-2011 11:48 ]

[digital-IMEI]

Janoz schreef op vrijdag 16 september 2011 @ 11:45:
Hij wil wat aanroepen op de facebook pagina, en dat mag natuurlijk niet (zie error). Dat het wel werkt wanneer je de pagina los opent laat wel zien dat die actie helemaal niet nodig is voor de werking van de pagina.

Hij (validaton) dient iets binnen het iframe aan te spreken waar hij op dit moment de parent (de facebook pagina zelf) aanspreekt en vandaar inderdaad de foutmelding. Maar ik moet toch tegen validation kunnen vertellen dat hij de elementen binnen het iframe moet zoeken ipv in z`n parent?

Ik hoop dat dit het iets duidelijker maakt

MueR schreef op vrijdag 16 september 2011 @ 11:42:
Je probleem is de Same Origin Policy. Dat ga je niet op kunnen lossen zolang je gebruik wil maken van die Facebook code.

Als ik de wiki goed begrijp, wil ik juist het same origin policy concept gehoorzamen.
[Yip en Janneke]De javascript validation functie wil in het tuintje van Facebook gaan spelen maar moet juist in z`n eigen tuintje blijven spelen, dus binnen het iframe waar hij zichzelf ook in bevind.
[/Yip en Janneke]

[Janoz]

Sjengcity schreef op vrijdag 16 september 2011 @ 13:18:
... Maar ik moet toch tegen validation kunnen vertellen dat hij de elementen binnen het iframe moet zoeken ipv in z`n parent?

Lees mijn post anders nog eens een keertje door.

[digital-IMEI]

Janoz schreef op zaterdag 17 september 2011 @ 15:32:
[...]

Lees mijn post anders nog eens een keertje door.

Die target="_parent" (wat inderdaad een fout was) geeft toch alleen maar aan waar het formulier naar toe gepost dient te worden? Dit geeft aan validation toch niet aan dat hij het formulier binnen het huidige frameset moet zoeken?

[Janoz]

Sjengcity schreef op zaterdag 17 september 2011 @ 16:10:
[...]

Die target="_parent" (wat inderdaad een fout was) geeft toch alleen maar aan waar het formulier naar toe gepost dient te worden? Dit geeft aan validation toch niet aan dat hij het formulier binnen het huidige frameset moet zoeken?

Waarom denk je dat?

[digital-IMEI]

Omdat het binnen de <fb:registration> staat en niet binnen de validation function? Heb het overigens aangepast naar _parent maar maakt geen verschil

[digital-IMEI]

Can i kick it?

[Verwijderd]

Hi,

sowieso ga je met _parent waarschijnlijk refereren, naar het parent van je iframe, ik zou het eens testen met _self.

Groeten

[digital-IMEI]

Verwijderd schreef op maandag 19 september 2011 @ 17:01:
Hi,

sowieso ga je met _parent waarschijnlijk refereren, naar het parent van je iframe, ik zou het eens testen met _self.

Groeten

Nogmaals geprobeerd maar ook _self maar geen verschil. Als iemand anders nog een idee heeft hoor ik het heel graag!

[Naranya]

Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/pages/pagina-naam/paginaid?sk=app_id from frame with URL http://www.bronvaniframe.nl. Domains, protocols and ports must match.

Weet je zeker dat het de validate() functie is die aangeroepen wordt en geen andere?

[digital-IMEI]

Nu ben ik de kluts helemaal kwijt.

De standaard kant en klare code van Facebook van deze pagina (onder het kopje Client Side Validation) werkt niet eens

JavaScript:

<fb:registration redirect-uri="https://developers.facebook.com/tools/echo" 
 fields='[
   {"name":"name"},
   {"name":"foo","description":"Type foo","type":"text"},
   {"name":"bar","description":"Type bar","type":"text"},
   {"name":"facebooker","description":"Pick Paul","type":"select","options":
     {"coder":"Paul","pm":"Austin","partners":"Cat"}},
   {"name":"check","description":"Check this","type":"checkbox"},
   {"name":"date","description":"Dec 16 2010","type":"date"},
   {"name":"city","description":"Calgary","type":"typeahead","categories":
     ["city"]}]' 
 onvalidate="validate"></fb:registration> 

<script> 
function validate(form) {
  errors = {};
  if (form.foo !== "foo") {
    errors.foo = "You didn't type foo";
  }
  if (form.bar !== "bar") {
    errors.bar = "You didn't type bar";
  }
  if (form.facebooker !== "coder") {
    errors.facebooker = "Pick the geeky one";
  }
  if (!form.check) {
    errors.check = "Check the little box";
  }
  if (form.date !== '12/16/2010') {
    errors.date = "That isn't the launch date";
  }
  if (form.city.id !== '111983945494775') {
    errors.city = "That isn't Calgary, Alberta";
  }
  return errors;
}
</script> 

test setup staat hier:

Dit geeft dus alleen maar errors

code:

Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/plugins/registration.php?api_key=145675655503983&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df7ccc6e9c%26origin%3Dhttp%253A%252F%252Fivo.meisen.nl%252Ff30688f594%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=145675655503983&fb_only=false&fb_register=false&fields=%5B%0A%20%20%20%7B%22name%22%3A%22name%22%7D%2C%0A%20%20%20%7B%22name%22%3A%22foo%22%2C%22description%22%3A%22Type%20foo%22%2C%22type%22%3A%22text%22%7D%2C%0A%20%20%20%7B%22name%22%3A%22bar%22%2C%22description%22%3A%22Type%20bar%22%2C%22type%22%3A%22text%22%7D%2C%0A%20%20%20%7B%22name%22%3A%22facebooker%22%2C%22description%22%3A%22Pick%20Paul%22%2C%22type%22%3A%22select%22%2C%22options%22%3A%0A%20%20%20%20%20%7B%22coder%22%3A%22Paul%22%2C%22pm%22%3A%22Austin%22%2C%22partners%22%3A%22Cat%22%7D%7D%2C%0A%20%20%20%7B%22name%22%3A%22check%22%2C%22description%22%3A%22Check%20this%22%2C%22type%22%3A%22checkbox%22%7D%2C%0A%20%20%20%7B%22name%22%3A%22date%22%2C%22description%22%3A%22Dec%2016%202010%22%2C%22type%22%3A%22date%22%7D%2C%0A%20%20%20%7B%22name%22%3A%22city%22%2C%22description%22%3A%22Calgary%22%2C%22type%22%3A%22typeahead%22%2C%22categories%22%3A%0A%20%20%20%20%20%5B%22city%22%5D%7D%5D&locale=en_US&onvalidate=validate&redirect_uri=http%3A%2F%2Fivo.meisen.nl%2Ffacebook.php&sdk=joey&session_key=2.AQBKHOZJSg2BU442.3600.1316534400.1-1527194587&width=600 from frame with URL http://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=Registration.Validation&params=%7B%22errors%22%3A%7B%22foo%22%3A%22You%20didn't%20type%20foo%22%2C%22bar%22%3A%22You%20didn't%20type%20bar%22%2C%22facebooker%22%3A%22Pick%20the%20geeky%20one%22%2C%22check%22%3A%22Check%20the%20little%20box%22%2C%22date%22%3A%22That%20isn't%20the%20launch%20date%22%2C%22city%22%3A%22That%20isn't%20Calgary%2C%20Alberta%22%7D%2C%22id%22%3A%22266976fe%22%7D&relation=parent.frames%5B%22f2ca04841c%22%5D. Domains, protocols and ports must match.

Wie o wie?

[Naranya]

http://static.ak.facebook.com/connect/
https://www.facebook.com/plugins/...

Domains, protocols and ports must match.

Lijkt me vrij duidelijk.

[digital-IMEI]

Naranya schreef op dinsdag 20 september 2011 @ 17:04:
http://static.ak.facebook.com/connect/
https://www.facebook.com/plugins/...

Domains, protocols and ports must match.

Lijkt me vrij duidelijk.

Die kan ik toch lastig gaan veranderen aangezien die allemaal worden geladen dmv javascript: http://connect.facebook.net/en_US/all.js

[Naranya]

Verander het dan in https, die werkt ook gewoon.
https://connect.facebook.net/en_US/all.js

Staat ook bij het voorbeeld onder het kopje XFBML op https://developers.facebook.com/docs/plugins/registration/