Solved

Accessing elements inside an iframe

Posted on 2016-08-10
5
85 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 58

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 58

Expert Comment

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

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

623 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