0

こんにちは、別のページからサーバー上のページに JavaScript を挿入しようとしています。最初のページは iframe に読み込まれます。iFrame をホストしているページからそのページ (iframe 内) にいくつかの css スタイルを挿入したいと思います。これを行うために使用できるjQueryスクリプトはありますか?

何かのようなもの。
page1->page2 iframe。スタイル用の page2 スクリプト -> iframe 内の page1

    <body>
    <!--<div id="left_col"></div>-->
    <div id="middle_col">
        <!--header-->
        <div id="header">
            <p>iFrame Example</p>
        </div>      
                <div id="entry">
                    <p>Enter your URL</p>
                    <textarea id="mytextarea" rows="1" cols="50"></textarea>

                        <a title="Check Me Out!" id="btn-wrap">
                            <span class="title">Click to view site</span>

                            <div id="info">
                                <p>
                                    <strong>Don't forget</strong>
                                    <strong>the "http://"</strong>
                                </p>
                            </div>
                        </a>
                </div>
             <br/>
             <br/>
            <iframe id="myframe" src="http://johnverber.com/simple.html">
            </iframe>
    </div>
    <!--<div id="right_col"></div>-->

<script>
    $(document).ready(function() {
        positionAd();
     });

    $(window).resize(function() {
        positionAd();
    });

    var positionAd = function() {
        var WINDOW_WIDTH = $(window).width();
        var WINDOW_HEIGHT = $(window).height();
        var BOX_WIDTH = $('#middle_col').width();
        var BOX_HEIGHT = $('#middle_col').height();

        $('#middle_col').css({"left": (WINDOW_WIDTH - BOX_WIDTH)/2, "top" : (WINDOW_HEIGHT - BOX_HEIGHT)/2});
        }

    $('#btn-wrap').click(function() {
                    var urlVal = $('#mytextarea').val();
                    if(urlVal.match("?_myTag")){
                        document.getElementById('myframe').src = urlVal;
                    }
                    else{
                        var addTag = urlVal.concat("?_myTag");
                        document.getElementById('myframe').src = addTag;
                    }
    });

    $('#myframe').contents().find("head").append("<link rel="stylesheet" type="text/css" href="addStyles.css" />");

</script>
</body>
4

2 に答える 2

1

jQuery を使用しての内部 DOM.contents()にアクセスできます。iframeそこからは非常に簡単です。

$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");

それが役に立ったことを願っています！

于 2012-09-04T19:13:01.380 に答える
0

さて、これが最終的に機能したものです：

$("#iframe_id").contents().find("head").html("<style>..styles..</style>");
于 2012-09-05T03:05:42.303 に答える