Ajax object IE: Youtube videos not properly loading - javascript

Once a first page is loaded nomally in my website, I request all other pages body contents with javascript ajax (ajaxObject).
I simply grab the body innerHTML with ajaxObject (javascript) and replace the actual one:
<script type="text/javascript">
function get(url) {
var myRequest = new ajaxObject(url, uGotAResponse);
myRequest.update('','GET');
}
function uGotAResponse(responseText,responseStatus) {
//Create a temp div to be able to use getElementById on it.
var theTempDiv = document.createElement('div');
//put the grabbed body innerHTML into it.
theTempDiv.innerHTML = responseText;
//my pages are like <body><div id="divcontent">content of pages here</div></body>
//so i get that div containing the innerHTML i really need.
var allDiv = theTempDiv.getElementsByTagName('div');
for (var i=0; i<allDiv.length; i++) {
if (allDiv[i].getAttribute('id') == 'divcontent') {
//i now replace the actual body innerHTML by the one i requested.
document.getElementById('divcontent').innerHTML=allDiv[i].innerHTML;
}
}
}
</script>
On a page, I have youtube objects for embed videos:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/1ahKNnolR30" height="315px" width="420px"><param name="movie" value="http://www.youtube.com/v/1ahKNnolR30"></object>
In Firefox everything is fine if I either load the page using the address or with that ajax code.
With IE, it works only if I go to the page using the address.
When I try to use the ajax code the videos appear as the image below.
I tried it with IE tester, all versions give me the same error behaviour.
Does anyone have a fix for this maybe?
As you can see, it looks like the object video is there, but looks like IE is not interpreting it because its loaded by ajax.

Related

get a dynamic id from an iframe in an iframe

I am actually doing a tricky task, I have to create pack of resource(which are pages on the website), to do so I use iframe to display the content of the pages. But I can have multiples Iframes in one Iframe.
And I want to pass some style on those iframe in iframe, so i have to target them.
I have a special node id for each pages that allow me to return only the body.
So my question is how do I get to target the id of my iframe in my iframe which I tried to do with that line var get_iframe_inside = search_inside.getElementsByTagName("iframe".id); to then modify it's style.
I know that I am not using the right way for this line, but I have been scratching my head all this morning and can't find a way.
function test(id){
var iframe = window.parent.document.getElementById(id); //select my first iframe
get_iframe_inside(id); //call my function to get the iframe in the iframe
function get_iframe_inside (id){
var search_inside = (iframe.contentDocument) ?iframe.contentDocument : iframe.contentWindow.document;
//My goal is then to modify some properties
var get_iframe_inside = search_inside.getElementsByTagName("iframe".id);
$(get_iframe_inside).css({'padding':'0px 50px', 'background-color':'#cecece'});
}
}
Well it was kind of trivial my code was nearly working i just didn't tought at how to get thoses ids.
i just had to get them by tag and after that to do an iteration with for.
var get_iframe_inside = search_inside.getElementsByTagName("iframe");
var i;
for (i = 0; i < get_iframe_inside.length; i++){
get_iframe_inside[i].style.padding='0px 50px';

Javascript updates content asynchronously

I wonder how it is possible that using javascript, images can be loaded asynchronously by changing the src of the img element after the page has been loaded. I thought that AJAX is for things like that(getting data from server without refreshing the page). Please clarify why it is working that way. The images are on server side, so I thought that i should refresh the page before the result will be visible.
Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var photos = ["baloon", "game", "cliff"];
function changePhoto() {
var input=document.getElementById("ph1");
var iValue=input.value.trim();
for(var tmp in photos) {
if(photos[tmp] === iValue){
var img=document.getElementById("photo");
img.setAttribute("src", "img/"+iValue+".jpg");
}
}
}
</script>
</head>
<body>
<input class="form-control" id="ph1" type="text" onkeyup="">
<p>Photo: <span id="txtHint" onclick="changePhoto()"></span></p>
</div>
<div class="container" id="photocontainer">
<img id="photo">
</div>
</body>
</html>
The user agent simply sends a GET request in response to the changing of the src attribute, the same that is done when a page loads initially.
AJAX is a technology that allows for asynchronous requests in JavaScript on the client. Browsers can make any requests they want at any time, as in this case, but without AJAX that couldn't be done in client-side code loaded by a website.
For example, I just changed the src property of an element in a page through Chrome Developer Tools and watched the GET request execute.
What you're doing in your code is not Ajax. Is simple javascript.
To make this work with Ajax you need a server side aplication that actually renders the image or get the contents from an existing file, and after that you show your loaded file on the browser.
Look for a jQuery ajax calls.
On the return of the call you can put your code.
Like this:
$.ajax({
url: "SomeUrl/SomeMethod/"
})
.done(function (response) {
//Do stuff here with the response to show the image
});
When you change src atrribute of an img element browser automatically starts downloading this image asynchronously.
Your code is almost ok. You iterate through array incorrectly.
You can try doing it this way instead:
var photos = ["baloon", "game", "cliff"];
function changePhoto() {
var input=document.getElementById("ph1");
var iValue=input.value.trim();
if(photos.indexOf(iValue) > -1) {
var img=document.getElementById("photo");
img.setAttribute("src", "img/"+iValue+".jpg");
}
}
Iterating through array
You can iterate through array for example like this:
for(var i=0; i<photos.length; i++) {
var photo = photos[i];
//...
}
or like this:
for(var k in Object.keys(photos)) {
var photo = photos[k];
//...
}

How to dynamically add scripts to webpage from an HTML string?

Say I have a string named html that has this in it:
<script>
document.write("Some random stuff here");
</script>
<script src="someremotejsfile"></script>
I want to display this within an iframe window dynamically.
My original solution was to do:
document.open();
document.write(html);
document.close();
But this causes problems in firefox where the spinner keeps spinning as if its loading forever even though the content has already loaded. My next attempt was to:
document.body.innerHTML = html;
This adds the scripts to the body, but that doesn't actually execute them. So lastly I tried:
div = document.createElement("div");
div.innerHTML = html;
document.body.appendChild(div);
But this also doesn't seem to execute the scripts inside the html string.
So my question is, given a string of html, how do I dynamically add it to the page? For instance, it can be an ad tag that has any number of scripts and other html elements in it. I have no control over what that html string has in it. It's a black box to me. I just have to be able to take that long string of html and load it into the window (an iframe in this case).
document.write works:
<iframe id="ifr"></iframe>
<script type="text/javascript">
var scr = decodeURIComponent("%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cscript%3Ealert(%27Some%20random%20stuff%20here%27)%3B%3C%2Fscript%3E");
document.getElementById("ifr").contentWindow.document.write(scr);
document.getElementById("ifr").contentWindow.document.close();
</script>
(Never mind encoded URI string, just needed it to be able to assign code <h1>Hello World</h1><script>alert('Some random stuff here');</script> to a string variable inside of script tags
If you're using jQuery you can use .html to load, and it will fire your script
$(document.body).html( $(document.body).html() + htmlToAdd );
If you're not using jQuery, you can eval manually your script..
function appendHTMLtoBody(html){
var body = document.body;
var scriptsLoaded = [].slice.apply(body.getElementsByTagName("script"),[0]);
for(var i = 0; i < scriptsLoaded.length; i++){
scriptsLoaded[i].setAttribute("data-loaded","true");
}
body.innerHTML += html;
var allScripts = body.getElementsByTagName("script");
for(var i = 0; i < allScripts.length; i++){
if( allScripts[i].getAttribute("data-loaded") !== "true" ){
var script = allScripts[i].innerHTML;
eval(script);
}
}
}
i think will solve your problem.

Read data from iframe with JavaScript

My problem is as follows:
I designed a homepage and I Have a index (www.abc.com) site and a site with news(www.abc.com/index.html).
I tried to bring my headlines of all the news automatically to my index site. Therefore I programmed a small javascript function and it works locally but it doesn't work when it goes online.
The way I'm doing this is:
Include an iframe (www.abc.com/index.html) in my index
iframe is not visible
Getting the structure of the iframe in my JS
Picking out the information I need for the index
Copy the data into my index
I know that I can't get data out from iframes which are not in my webspace, but this is in my webspace.
<iframe name="nf" id="newsframe" src="http://www.rossegger.at/news.html"
style="visibility:hidden"></iframe>
<table id="news_table"></table>
function load_news() {
var con = document.getElementById("news_table");
var frame = window.frames['nf'].document.getElementsByClassName('n');
if(frame.length != 0)
{
con.innerHTML += "<tr><h2 color=white>NEWS</h2></tr><hr>";
for(var i=0; i<frame.length; i++)
{
con.innerHTML += "<tr>"+frame[i].textContent+"</tr><hr>";
}
}
}
The problem is frame.length is always 0 (online)
offline the value has the right value.
Can anyone help me?
You can't due to sandbox limitations in the browser. You have to approach the problem from a different angel, try fetch the iframe site with javascript and show it in a div. Or set up a rss page for your news site and get the headlines from that source.

Javascript function that returns a DOM when input is html content

I want a Javascript function that returns a correct DOM when input is HTML content.
I have used the follwing function for the same. Here input is HTML content and output is DOM.
function htmltoelement(elementHTML)
{
var temDiv = document.createElement('div');
temDiv.innerHTML = elementHTML;
return temDiv;
}
This function works well for Firefox, but not for IE or Chrome, when the HTML is broken.
I need a suggestion for a function that works fine on all the browsers even when HTML is broken.
With "broken" HTML (which I am assuming is invalid) the way it is interpreted is largely up to the browser and the mode that the browser is in. The DOCTYPE at the top will dictate how the innerHTML property is parsed when it is set. For XHTML, it will give you some odd results because "broken" HTML will mess up your entire page. The function you are using is correct, but it seems you need to check your input for compliance before attempting to create the div.
You can achieve this by writing it out to a hidden iframe:
<iframe id="frame" style="display:none"></iframe>
<script type="text/javascript">
function htmltoelement(elementHTML)
{
var temp = document.getElementById('frame');
// Cross-browser way to get the iframe document
var idoc = (temp.contentWindow || temp.contentDocument);
if (idoc && idoc.document) idoc = idoc.document;
// Put the HTML in the iframe
idoc.write("<html><body>" + elementHTML + "</body></html>");
temDiv = document.createElement('div');
temDiv.innerHTML = idoc.body.innerHTML;
return temDiv;
}
document.body.appendChild(htmltoelement('<b><i>hi</b></i>'));
</script>
The hidden IFRAME seems to be necessary, document.createElement('iframe') didn't work in Opera.

Categories