Problems inserting html with css and jquery into iframe

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/
LVL 2
itniflAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
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
itniflAuthor Commented:
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
COBOLdinosaurCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

itniflAuthor Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
InsoftserviceCommented:
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
itniflAuthor Commented:
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
InsoftserviceCommented:
@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
itniflAuthor Commented:
@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
itniflAuthor Commented:
Reason for choosing my own solution; Found my own solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.