Accessing elements inside an iframe

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
Rohit BajajAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kim WalkerWeb Programmer/TechnicianCommented:
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
Rohit BajajAuthor Commented:
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
Kim WalkerWeb Programmer/TechnicianCommented:
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
Julian HansenCommented:
As a matter of interest what is the reason for the iframe?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.