Solved

Problems inserting html with css and jquery into iframe

Posted on 2014-07-23
9
727 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can display objects ? 3 24
Regular Expression Calculator Tester 2 57
Regular Expression 1-100 with two digits 15 23
Centering Vertically 3 28
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 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

17 Experts available now in Live!

Get 1:1 Help Now