Go Premium for a chance to win a PS4. Enter to Win


Problems inserting html with css and jquery into iframe

Posted on 2014-07-23
Medium Priority
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:

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/
Question by:itnifl
  • 5
  • 2
  • 2
LVL 53

Expert Comment

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.


Author Comment

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

LVL 53

Expert Comment

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:
You might find a combination values that solve the problem with a little experimentation.

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Accepted Solution

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;

Open in new window

Previously I had done it this way:

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:

Ad here testing the second route:

Both problems are solved now :)
LVL 15

Expert Comment

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

Author Comment

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.
LVL 15

Expert Comment

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 .

Author Comment

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.

Author Closing Comment

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

772 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