Solved

Problems inserting html with css and jquery into iframe

Posted on 2014-07-23
9
720 Views
Last Modified: 2014-07-29
I am struggling with a few jQuery problems. I am using an api that I wrote in nodejs to cache data from www.omdbapi.com and display movies listed as folders on the hard drive where the api resides. The api is here: https://github.com/itnifl/myMovieApi

It works fine when testing solo:
http://nodenet.homelinux.net:3000/moviesAsHTML/true
http://nodenet.homelinux.net:3000/moviesAsHTML/large/true

But I want to load the http reply from the api and insert it into an iframe.

Problem 1:
This works in the sense that the result is displayed, but with a problem that occured when I started putting the result into the iframe(I didn't normally do that); going to the next element in the carousel will not work (try it: http://jsfiddle.net/atle_holm/Ax8rQ/). However, this works fine a long as I don't use an iframe, example here: http://www.team-holm.net

Problem 2:
When requesting the 'moviesAsHTML/large/true' route (http://nodenet.homelinux.net:3000/moviesAsHTML/large/true) and insert it into the iframe, everything just goes blank. Can't figure out why. The console on my browser says: "Uncaught TypeError: undefined is not a function." A fiddle that shows the problem when requesting and inserting data from that route can be found here: http://jsfiddle.net/atle_holm/Ax8rQ/2/
0
Comment
Question by:itnifl
  • 5
  • 2
  • 2
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40217133
It is likely that the different folders are seen by the browser as different domains, and scripting cross-domain will fail. You would be better to use AJAX to bring the content into a container on the main page instead of using an iframe, then you should eliminate the scripting issues.

Cd&
0
 
LVL 2

Author Comment

by:itnifl
ID: 40217923
I don't understand the term folders in this context? Could you please explain?

I need the iframe so that I can sandbox the result from the API. This is because I choose to let the api respond back with needed css and javascript includes that may or may not interfere with the existing page. As in the example of the moviesAsHTML/large/true route that previously just emptied the iframe as shown in the fiddle found here:  http://jsfiddle.net/atle_holm/Ax8rQ/2/

The JsShowOff plugin to my knowledge and experience does not work with the newer versions of jQuery. Therefore, I need to sandbox the whole thing into an iframe where it can have its own jQuery version.

I removed much of the code that seems to have played a role in hiding the iframe and saw that the iframe actually is getting content. See http://jsfiddle.net/atle_holm/Ax8rQ/3/

I guess that the code chain that is supposed to end with displaying all what initially was hidden gets broken when I get the error:
TypeError: undefined is not a function

According to the debugging view in Chrome when using jsfiddle, this error refers to this snippet of code:
$(document).ready(function(){ 
      $('#features').jshowoff({
				effect: 'slideLeft',
				hoverPause: true,
        speed: 10000
			}); 
   });

Open in new window


This code is what gets executed in a script tag at the end of the view reply from the api to execute jShowOff. If it fails, I am assuming that jShowOff is not getting properly initalized. But why? The script tag is there: <script src="https://rawgit.com/ekallevig/jShowOff/master/jquery.jshowoff.min.js" type="text/javascript"></script>
But it does not get put into the <head> of the iframe and does it need to?

In other testing that I do outside jsfiddle it looks like the script tags for javascript aren't even shown in the iframe as they should, which explains both problems in the question above.

The api returns the html just bare without html, body and head tags. This is because I want it to be insertable anywhere, also where these tags exist already. However, when I view the api html return directly in the browser(http://nodenet.homelinux.net:3000/moviesAsHTML/large/true), it seems that the script includes are automatically put in between the head tags by the browser, and html, body and head tags are automatically generated.

I tried to insert the script tags into the head of the iframe manually, but it didn't seem to work.

$('#preview-iframe').contents().find('head').html('<script src="https://rawgit.com/ekallevig/jShowOff/master/jquery.jshowoff.min.js" type="text/javascript"></script>');

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40217992
Folders.  You said you have the movies listed as folders.

In anycase what you are seeing is almost certainly a security issue.  Every modern browser in the world has builtin native code to prevent cross-domain scripting because iwithout it there is a security hole big enough to fit an aircraft carrier.

You are never going to get it to work using an iframe as long as any of the iframe content is being servered from anyplace other than where the main page is servered.  You can bring stuff in but it is strictly read/only and you cannot use any scripting to reference or manipulate anything in the iframe.

It is possible that you might be able to get around some of it using the sandboxattribute of the iframe.  If you look here:
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
You might find a combination values that solve the problem with a little experimentation.

Cd&
0
 
LVL 2

Accepted Solution

by:
itnifl earned 0 total points
ID: 40218078
I don't think you have perceived the system correctly. The REST api is a nodejs server running on a Linux OS as a server. It reads a folder under its location called movieDir. In that folder there are folders with names of movies. It reads the names and takes them as input. It then fetches movie data about the movies received as input and populates a template that it returns as html to the requester. The html is represented as a string and is returned after the client performs a get request against the api.

Basically you are saying that REST apis can't be implemented as long as they are not in the same domain as the page that does the request. For doing PUT and DELETE statements, I would most likely need to implement CORS to make this work, but not for GET and POST as far as I can remember.

I understand that the information that I have given this far is a bit extensive and alot to spend time on. However if you would have tried it out you would see what I am mentioning here.

After a whole bunch of trial and error, I have finally come with the solution. To get the script tags to be a part of the head tag, I have to write the html string data to the iframe this way:

var iframe =  $('#preview-iframe');
var idoc = iframe[0].contentDocument;
idoc.open();
idoc.write(data);
idoc.close();	

Open in new window


Previously I had done it this way:
$('#preview-iframe').contents().find('body').html(data);

Open in new window


The problem in the last statement is that I am inserting everything into the body element of the iframe, and that is long after the head ever appeared(empty).

And to proove it to you, here is a working fiddle tested in IE11, Chrome and Firefox:
http://jsfiddle.net/atle_holm/Ax8rQ/6/

Ad here testing the second route:
http://jsfiddle.net/atle_holm/Ax8rQ/7/

Both problems are solved now :)
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 15

Expert Comment

by:Insoftservice
ID: 40218595
agreed with @COBOLdinosaur comments.

Just addon i would suggest that if we start displaying the data on a website and later use these website url to the authors website in iframe i hope it will work.

for eg
say www.websitemoviedisplay.com/godzilla displays movie in normal form without issue
author website : <iframe src="http://www.websitemoviedisplay.com/godzilla"></iframe>
Do you agree @cobol
0
 
LVL 2

Author Comment

by:itnifl
ID: 40218793
There is one annoyance on this Experts-Exchange site, the fact that the Experts who help out actually repeatedly don't properly read the information that is posted. You guys aren't checking any of the information that I post here out.

insoftservice: you can't agree with @COBOLdinosaur when I have already shown that it works.

Please see http://jsfiddle.net/atle_holm/Ax8rQ/6/ and http://jsfiddle.net/atle_holm/Ax8rQ/7/

The problems is solved.
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40218991
@itnifl i have just commented that point mentioned by @cobol what even i would have suggested and i had just given my add on.
So its not required to be so rude in your writing. He tried to gave you the answer and so do i.
Even if your query is been resolved. We normally try to give our answers so that there can be other way to get the your issue resolved.
And if you don't require further comments after getting your query resolved its a humble request to close the ticket by accepting your own answer .
0
 
LVL 2

Author Comment

by:itnifl
ID: 40219009
@insoftservice: I understand that there is a possible cross domain issue that comes with the solution as it is depicted, and I think it is very good of you guys to point that out to me. It is also possible that I might not understand the your focus in the way you do. The possible window for this understading is in my opinion narrower when communicating by text.

I am sorry if you felt offended by my reply, it was not my intent to slap you in the face with my choice of words. I am in all ways grateful and thankful for your participation just as much as any other contributer that wishes to pitch in. If the solution is not found in the comment that is given, it still might shed light or brainstorm the topic in such a way that a soultion may be found.

Best regards.
0
 
LVL 2

Author Closing Comment

by:itnifl
ID: 40226236
Reason for choosing my own solution; Found my own solution.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now