In ASP.NET MVC 3 maak ik een blog aan met behulp van Entity Framework. De website maakt gebruik van HTML5 en de voorlopige blog werkt op de localhost.
In de mvc-applicatie zit een tekst-editor verworven met een bijhorende plugin om het gebruik van Iframes mogelijk te maken.
==> IFrame Dialog | CKEditor.com
Bij het aanmaken van een post voor op de blog, wil ik een youtube filmpje in een iframe plaatsen.
Zoals op deze afbeelding zijn de vakjes van "scrolling" en "frameborder" uitgeschakeld, als ik dus een youtube filmpje wil plaatsen.
Echter als de post volledig wordt aangemaakt, dan krijgt de post op de blog toch een iframe met bijhorende scrolling en frameborder waarden. Dan komt er in de paginabron bijvoorbeeld te staan:
HTML Code:
<iframe frameborder="0" height="360" name="Scarlett vs Bomber game 3" scrolling="no" src="http://www.youtube.com/embed/jIygo3bIVmo" title="Red Bull BattleGrounds" width="640"></iframe>
Als er nu meerdere iframes op de blogpagina staan, en ik gooi de gehele paginabron door een HTML5 validator, dan krijg ik altijd dezelfde foutmeldingen, namelijk:
- The frameborder attribute on the iframe element is obsolete. Use CSS instead.
- The scrolling attribute on the iframe element is obsolete. Use CSS instead.
De css moet ik dus aanpakken via het iframe element. Echter "scrolling" en "frameborder" zijn blijkbaar geen geldige attributen van het element 'iframe'. Na veelvuldig zoeken op Internet vind ik geen oplossing om onderstaande HTML code te bekomen als de pagina wordt geladen met alle ingestelde iframes vanuit de blog met zijn posts.
HTML Code:
<iframe height="360" name="Scarlett vs Bomber game 3" src="http://www.youtube.com/embed/jIygo3bIVmo" title="Red Bull BattleGrounds" width="640"></iframe>
Ik heb al zitten denken om Javascript te gebruiken, maar dan vraag ik me af, hoe ik dit ga aanpakken.
Hoe verwijder ik van elk iframe element dat op de blog (paginabron) gevonden wordt, de waarden:
- scrolling="no";
- frameborder="0";
zodat alles correct valideert in een HTML5 validator
Ikzelf wil starten met een functie, die vermeld staat bij de 'onload' van de body-tag of de iframe-tag zelf:
Code:
<script type="text/javascript">
function verwijderenScrolling_en_Frameborder_bij_iframe(source)
{
var iframe = document.getElementsByTagName("iframe")
source = this.src;
... hier zit ik vast met scrolling en frameborder te verwijderen... :help:
... iframe opnieuw instellen met source ...
}
</script>
Ik had ook gedacht aan document.getElementByID en iframe.innerHTML, maar dan moet ik een id toekennen aan een iframe met een nummer, maar dat is voor mij ook een beetje een raadsel of dit zou werken, omdat ik niet weet op voorhand hoeveel youtube filmpjes in een iframe terecht gaan komen op de blog.
Ook weet ik niet of het nog zou werken als ik eventueel wil overstappen naar een paginatie in ASP.NET.
Het script staat voorlopig op de "_Layout.cshtml" van de Shared folder, of is het aangeraden het script te plaatsen op de aparte view waar een lijst van posts weergegeven wordt op de blog?
Is dit probleem op te lossen of moet ik de keuze maken om toch voor een werkende blog te gaan maar met een foutieve validatie?
Dank bij voorbaat voor wie enige hulp kan aanbieden ...