Solved

Accessing elements inside an iframe

Posted on 2016-08-10
5
65 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 54

Accepted Solution

by:
Julian Hansen earned 300 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 200 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 54

Expert Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

816 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

12 Experts available now in Live!

Get 1:1 Help Now