We help IT Professionals succeed at work.
Get Started

Accessing elements inside an iframe

162 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
Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 2 Answers and 5 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE