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

x
?
Solved

Accessing elements inside an iframe

Posted on 2016-08-10
5
Medium Priority
?
98 Views
Last Modified: 2016-09-02
Hi,
I am sharing two html projects.
notes.zip
The above is the original i was making. It had the markdown thing inplace.. When you choose markdown from drop down markdown editor appears.
Now i need to apply a special content.css file only to the markdown div element. So i decided to put it inside another iframe  and made the project :
iframe-notes.zip
The problem is as i have not changed the javascript here. Things are not appearing as they were appearing earlier.
for example this is ajavscript code i am using :
var marked = require("marked");
var toMarkdown = require('to-markdown');
module.exports = function() {
    $("#mode").on("change", function(event) {
        var mode = $("#mode option:selected").val();
        if (mode === "Mark Down") {
            $('#cke_editor').hide();
            $('#markdown').show();
            $('#preview').hide();
            $('#write').show();
            $('.tab li').removeClass('active');
            $('.tab li:first').addClass('active');
            var data = ckeditor.getData();
            var markdown = toMarkdown(data);
            $('#write textarea').text(markdown);
        } else if (mode === "Rich Text") {
            $('#markdown').hide();
            $('#cke_editor').show();
            var text = $('#write textarea').val();
            var html = marked(text);
            ckeditor.setData(html);
        }
    });
    $('.tab li').on('click', function(event) {
        var tabname = event.target.dataset.tab;
        if (tabname === 'preview') {
            var text = $('#write textarea').val();
            var html = marked(text);
            $('#preview').html(html);
        }
        $('.tabcontent').hide();
        $('.tab li').removeClass('active');
        $('#' + tabname).css("display", "block");
        $(event.currentTarget).addClass('active');
    });
    $('#write textarea').on('paste keyup', function(){
        var isEmpty = $('#write textarea').val() === "";
        $('#submit').prop('disabled', isEmpty);
    });
}

Open in new window

This works perfectly in the initial project. But not when i convert the div into an iframe :
I tried $('.tab li') on console and it didnt return anything. This is probably because its inside the iframe.
Also in the above code #mode is outside the iframe. So its kind of mix n match. things outside are accessing things inside the iframe and things inside the iframe $('#write textarea') are accessing things outside the iframe :
$('#submit')

I need to somehow transform this javascript so that it works when i use the ifram.
Also how can i make this work : $('.tab li') ??
And whats the general approach to take in such a scenario ?

Thanks
0
Comment
Question by:Rohit Bajaj
  • 2
  • 2
5 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1200 total points
ID: 41750898
An iframe is ring fenced from its parent. In order to access the iFrame you will have to put script in the iFrame that calls into the parent window. This is for obvious security reasons.
If they were not there I could iFrame any site and then change things on the page to suite my requirements.

The first question you need to ask is using an iFrame the only way to do what you want to.

If you only need to apply styling to a particular div then simply give the div a class and style relative to that - overriding any other styles that might be cascading into the div.

This is the correct way to handle this.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 800 total points
ID: 41751511
Just to expound on what Julian said above, the content of an iframe must be a full web page. It must have its own doctype declaration, head, and body element. You should be able to view that content alone in a separate window of your browser. It should have its own CSS stylesheets and javascript code.

Julian used the term ring fenced. Another term for this is sandbox. The content of the parent window should not have any control over the iframe content though it can in a limited sense. The iframe contains its own document DOM object which is an ancestor to the parent document object.
0
 

Author Comment

by:Rohit Bajaj
ID: 41754938
Hi,
The url that loads the iframe is of same domain as the parent window one... Does in this case also will parent window wont be able to do anything with iframe ?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41755089
I have not bothered to download, unzip, and peruse your code. Unless you've included all external assets, it's unlikely I can discern anything from it anyway. But I suppose I could answer my own question if I was so inclined to go that extra mile.

But I don't have time to do that right now. Are you using HTML5 and have you included a sandbox attribute in your iframe element? The allow-same-origin value might help in your situation.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41755455
As a matter of interest what is the reason for the iframe?
0

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

972 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