Solved

Accessing elements inside an iframe

Posted on 2016-08-10
5
52 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 51

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 21

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 21

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 51

Expert Comment

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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will learn how to count occurrences of each item in an array.
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)

762 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

21 Experts available now in Live!

Get 1:1 Help Now