CODEWITHSUNDEEP
javascripthtmliframeframe
Andrey Yaskulsky
Andrey Yaskulsky

Reputation: 2526

JavaScript inside iframe does not work

I have a jsp with iframe inside it. I'm trying to load another jsp in the iframe:

 scripts and links ...
<body>
<iframe src="/contextmenu">
</iframe>

<div style="float:left;">
    <div id="StudentTableContainer" style="width:70%;"></div>
</div>
</body>
</html>

here is contextmenu:

 scripts and links ...
    <body>
    <div data-role="content">
        <ul data-role="listview" id="listView">
            <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
            ...
        </ul>
    </div>
    </body>

The idea is to separate javascript that is located in the first jsp and javascript that is located in the page within iframe. I can't merge javascript in the one page (without iframe) because it makes errors and page crashes. But unfortunately javascript within iframe simply doesn't work. This piece of code in the <head> never calls alert:

<script>
    jQuery(document).ready(function () {
        alert(1);
        $('#listView').listview();
    });
</script>

and i'm not sure if i can load another js or css file like that:

 <script type="text/javascript"
            src="<c:url value="/resources/js/jquery.mobile-1.2.1/jquery.mobile-1.2.1.js"/>"></script>

I'm pretty new to web and javascript too, so sorry if the question is silly. I'll appreciate any help.

Upvotes: 1

Views: 9678

Answers (1)

Michael Geary
Michael Geary

Reputation: 28870

Is this <script> tag right?

<script type="text/javascript"
    src="<c:url value="/resources/js/jquery.mobile-1.2.1/jquery.mobile-1.2.1.js"/>"></script>

Does the c: part mean this is a ColdFusion template or something like that?

In any case, this is not what the browser sees. Whatever this template code generates is what the browser sees, so that's what you need to look at. A normal <script> tag in the browser would look like this:

<script src="/resources/js/jquery.mobile-1.2.1/jquery.mobile-1.2.1.js">
</script>

(You don't need the type="text/javascript".)

Are you familiar with the developer tools in any browser? It's time to start using them. Load your page in Chrome and open the Developer Tools (F12 in Windows, and I think it's Ctrl+Shift+I on other OSes, or you can find it in the Chrome menu). You may see an error message in the Console panel of the developer tools. (Be sure to reload your page after you open the tools.)

To debug further, change this code:

<script>
    jQuery(document).ready(function () {
        alert(1);
        $('#listView').listview();
    });
</script>

to:

<script>
    debugger;
    jQuery(document).ready(function () {
        debugger;
        $('#listView').listview();
    });
</script>

and reload the page with the developer tools open.

When it stops on the first debugger statement, roll the mouse over the namejQuery in the code. Does it show a definition of it or does it say it is undefined? That will tell you whether you're loading jQuery at all.

If it doesn't even get to the first debugger statement, then it's not running this <script> at all for some reason. But in that case the developer tools should show you some kind of error message.

While you're doing this, take some time to really get familiar with the developer tools. I promise you it will multiply your productivity. Here's an introduction to the DevTools.

Upvotes: 1

Related Questions