Q&A
iframe内のscriptを修正はできないのでしょうか。できないのでしたら「scriptからscriptを打ち消す・変更する」やり方では無理かと思います。iframe内もloadされないと外からはいじれませんし、loadされた時点で実行されます。
楽天市場出店者です。初心者の為用語等誤った使い方をしているかもしれませんが、よろしくご教授下さい。
外注のにぎわいツールで動的に動くランキングをiframeで呼び出しています。
その際に、iframeの中身は細かく設定が出来ない仕様なので、
jQueryで指定されるＩＤを、先に消す事は出来ますか？
もしくは、親ページから、iframe内の<script></script>の中身を消す事は出来ますか？
やりたい事としては、
現在10商品あるランキングを5商品見せて横に動的に動くランキングになっておりますが、動かさずに10商品が2段で全て出る様にしたいです。
iframe内の<script></script>の中身の$("#foo3").carouFredSel～の一固まりを消せば思った通りになるのですが、こちらは常に更新されて上書きされる仕様なので、親ページから操作する必要があります。
▼iframeの中身
html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4<head> 5<script type="text/javascript" src="jquery-1.8.2.min.js"></script> 6<script type="text/javascript" src="jquery.carouFredSel-6.2.0.js"></script> 7 8 9<style> 10 11 12</style> 13 14 15 16</head> 17<body> 18 19 20<div id="contents"> 21<div id="title">クリスマスギフトランキング</div> 22<div class="list_carousel"> 23 <ul id="foo3"> 24 <li> 25 <div class="item"> 26 <div class="ranking"> 27 <img src="crown1.png"> 28 第1位 29 </div> 30 31 <div class="item_img"> 32 <a href="//item.rakuten.co.jp/***/hh-8789/" target="_blank"><img src="//thumbnail.image.rakuten.co.jp/@0_mall/***/cabinet/i/1/426.jpg?_ex=128x128"></a> 33 </div> 34 35 36 <div class="item_name"> 37 <a href="//item.rakuten.co.jp/***/hh-8789/" target="_blank">2018秋冬新作 …</a> 38 </div> 39 40 <div class="item_price"> 41 <a href="//item.rakuten.co.jp/***/hh-8789/" target="_blank">¥5,780</a> 42 </div> 43 44 <div class="item_review"> 45 <img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_none.gif" width="12" height="12" /> (4.45) 46 </div> 47 48 </div> 49 </li> 50 <li> 51 <div class="item"> 52 <div class="ranking"> 53 <img src="crown2.png"> 54 第2位 55 </div> 56 57 <div class="item_img"> 58 <a href="//item.rakuten.co.jp/***/hh-8319/" target="_blank"><img src="//thumbnail.image.rakuten.co.jp/@0_mall/***/cabinet/tommy/imgrc0067403195.jpg?_ex=128x128"></a> 59 </div> 60 61 62 <div class="item_name"> 63 <a href="//item.rakuten.co.jp/***/hh-8319/" target="_blank"> バッグ …</a> 64 </div> 65 66 <div class="item_price"> 67 <a href="//item.rakuten.co.jp/***/hh-8319/" target="_blank">¥2,380</a> 68 </div> 69 70 <div class="item_review"> 71 <img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_full.gif" width="12" height="12" /><img src="star_half.gif" width="12" height="12" /> (4.75) 72 </div> 73 74 </div> 75 </li> 76 77 </ul> 78 <div class="clearfix"></div> 79</div> 80</div> 81 82 83 84<script> 85 86$("#foo3").carouFredSel({ 87 scroll : {items: 1}, 88 89 auto : {timeoutDuration: 3000, easing: 'swing'}, 90 91 prev :'#prev', 92 next :'#next', 93 94 height: 279, 95 width: 700, 96 direction: 'left' 97 98}); 99 100 101 102 103// for IE png 104jQuery(function() { 105 if(navigator.userAgent.indexOf("MSIE") != -1) { 106 jQuery('img').each(function() { 107 if(jQuery(this).attr('src').indexOf('.png') != -1) { 108 jQuery(this).css({ 109 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + jQuery(this).attr('src') + '", sizingMethod="scale");' 110 }); 111 } 112 }); 113 } 114}); 115 116 117</script> 118 119 120 121</body> 122</html>
【親ページで現在仕様しているjQuery /body手前】
jQuery
1<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 2 <script type="text/javascript"> 3$( function() { 4 $( 'iframe' ).css( 'opacity', 0 ); 5 $( window ).load( function() { 6 $( 'iframe' ).contents().find( '.item_price a' ).append( '円 （税込）' ); 7 $( 'iframe' ).contents().find( '.item_review' ).css( 'display', 'none' ); 8 $( 'iframe' ).contents().find( 'img' ).css( 'border', 'solid 1px #eee' ); 9 $( 'iframe' ).contents().find('a').css( 'text-decoration', 'none' ); 10 $( 'iframe' ).contents().find( '.item a[target="_blank"]' ).each( function() { 11 this.target = '_top'; 12 } ); 13 $( 'iframe' ).css( 'opacity', 1 ); 14 15 } ); 16} ); 17 18 </script>
【失敗した事】
・ID foo3を消せないか
$( 'iframe' ).contents().find( 'ul' ).removeAttr( 'id','foo3' );
を、body前の$( window ).load( function() {
の前や後に入れたり、実行される順番に関係があるかもと思い
headに入れたり
・<script></script> を消す事が出来ないか
そもそも、javascriptの中身をjavascriptで変更する様な事が、出来るでしょうか？
どの様な形でもいいので、10商品を順番に二段で並べられたらと思っております。
よろしくご教授下さい。
返答を頂きありがとうございます。 iframe内のscriptを変更しても、常に新しいランキングに更新されるので上書きされて消えてしまいます。 素人考えでscriptが消せないか考えたのですが、やはり無理ですよね。 ロードされないと実行出来ないという事は噛み砕いてもらうと、 順番としてiframe内のjQueryが既に実行された状態で#foo3の消してるから意味がない、という事でしょうか？ その他このiframe内のjQueryを打ち消す方法はないでしょうか？
>順番としてiframe内のjQueryが既に実行された状態で#foo3の消してるから意味がない おおよそその通りですね。外から操作するには全て読み込まれていることが前提です。そもそもですが、自サイト内で自分で管理できるものならともかく、楽天市場内で更に別のページをiframeで呼び出していて、それを外から操作するのは上級者でもかなり気を遣う部分です。どのような影響があるか分かりませんし。iframe内のコードに手を入れるしかないと思います。
やはり、やろうとしている事自体が無理難題という事ですね。3日程色々やって諦めがつかなくて質問しましたが、だいたい状況が分かりました。ありがとうございました。
iframeで利用されているカルーセルもcarouFredSelという一般的なプラグインのようですし、見せ方でしたら設定やオプションをなんとかすれば実現可能にも思いますので、その方向から検討を進められてはいかがでしょうか（今回の質問は外からなんとかできるか、ということで内部には触れていません） ので、自身で回答を書かれて自己解決としたあとに検証してつまずいたところを質問されるか、要件の方向性を修正されては。
楽天ショッピングの情報なのにそれを加工するのは、法的に問題のない範囲であることは確認済みですか？
楽天ショッピングの情報ではなく、楽天に出店している当社の店舗内ランキングを、 外注の業者にお金を払って作って自動形成されたデータとなり、その点は問題ありません。 にぎわいツールを作ってくれる業者は沢山あり、それこそテンプレートをhtml/css/javascriptと全てこちらの自由に変更出来る業者もありますが、 今回質問のものは量産する必要があり、全て自由に変更出来る業者は使えません。 mts10806さんが言われた様に業者のオプション変更（内部）で変更出来ないかもう一度全てのパターンを試してみましたが、 複数を選択して選ぶ形でしか変えられないので、やはりどれも希望の形になりませんでした。 全て動的に流れる使用の為です。 やはり親ページからアクセスする他方法がない様に思います。 正攻法では無理でも、なんとかiframeの中のjQueryを無効に出来ないでしょうか？ または、私では難しくても業者に頼めば可能な案件でしょうか？ 諦めが悪くて申し訳ないです
業者に頼んで対応をご検討ください。既に書いたように影響範囲等含めると簡単に手を出せるものではないと思いますし、質問者さんの技術的な理解や状況からみても質問サイトの範疇 にはないように思います。
回答1件
0
ベストアンサー
###成功に至るかどうかは試してください
まず、<iframe>ではなく、<frame>に変更する。
<frame>の目的のページのjqueryにIDを設定し、 <body onload>を使って、document.getElementById("[jqueryid]"); document.innerhtml="";
とすれば、jqueryのタグを空っぽにできると思われます。
ただフレームは現在の流行から外れていますので、
<div>などを使ってショッピングカートなども外注したのなら、 外注先の会社にスタイル変更を相談するのが早いのではないでしょうか？###onloadの補足
onloadイベントではランキングがすべて読み込まれたあとでloaded(200)をブラウザがサーバに送信後に操作しなさいという命令なので、動的更新は行われなくなりますが、ランキングが表示されないという問題は生じません（たぶん）。
投稿2018/11/14 11:05
編集2018/11/14 11:09総合スコア156
jqueryのタグを空っぽに出来ました！ありがとうございました！！！
失礼ですが、<iframe>でも可能でしたでしょうか？この時間では、<frame>タグに書き換えている時間はなかったと思われますが。
あなたの回答
tips
プレビュー
