Q&A
すべて自分の管理下にはあるのですが、frm.htmlは毎日クーロンで最新口コミで作成しているもので、PCページ用のものなので、スマホで使用するにはCSS書き換えるだけなので、スマホ用のクーロンを新たに作成するより上記方法でCSS書き換える方が楽かと思いました。
が、うまくいかないので、スマホ用クーロン作成する方向で考えてみます。
サンプルもありがとうございます。
でも、うまく動作させられなかったので、JS勉強して出直します。
この方法を試しましたが、CSSが全く適用されない？認識されてない？です。
１．やりたいこと
index.html（親ページ）にiframeで追加したfrm.php（子ページ）にstyle.cssを適用させたいです。
２．ディレクトリ構造
ドメイン直下/test/index.html
ドメイン直下/test/css/style.css
ドメイン直下/a/b/c/frm.php
ドメイン直下/a/b/c/d/frm.html
**追記２：**frm.htmlは/a/b/c/frm.htmlじゃなくて/a/b/c/d/frm.htmlでした。
３．コード
test/index.html
html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('#frame').on('load', function(){ 5 $('#frame').contents().find('head').append('<link rel="stylesheet" href="css/style.css" type="text/css" />'); 6 }); 7}); 8</script> 9<section> 10<div class="test1"> 11 <iframe id="frame" src="http://ドメイン/a/b/c/frm.php"></iframe> 12</div> 13</section>
a/b/c/frm.php
php
1<?php 2header("Content-Type: text/html; charset=UTF-8"); 3ini_set('output_buffering', "0"); 4略 5ini_set('display_errors', 'Off'); 6require('../z/Func.inc'); 7require('../z/Var.inc'); 8 9if(file_exists($test123.$test999)){ 10 Lock($Locktest999); 11 $outputHTML = Read888($test123.$test999); 12 UnLock($Locktest999); 13 14 echo $outputHTML;←ここで呼んでるのは/a/b/c/d/frm.html 15}else{ 16 require($test123.'frmxxx.html'); 17} 18 19?>
**追記３：**echo $outputHTML;←ここで呼んでるのは/a/b/c/d/frm.htmlを追記しました。
require($test123.'frm.html');をrequire($test123.'frmxxx.html');に修正しました。
a/b/c/d/frm.html
html
1<ul> 2<li class="left"><a href="a/b/k/k_1.html">推奨口コミ <span><?php echo htmlspecialchars($ResultsNumS); ?></span>件</a></li> 3<li class="right"><a href="a/b/k/k_2.html">非推奨口コミ <span><?php echo htmlspecialchars($ResultsNumK); ?></span>件</a></li> 4</ul> 5<dl> 6<dt><img src="images/a/b_bad.png" alt="非推奨口コミ"></dt> 7<dd> 8<span class="name"><a href="./a/b/n/detail_1.html">XXXへの口コミ</a></span><br> 9<span class="date">2018/09/22</span><br> 10口コミ内容本文 11</dd> 12</dl>
**追記４：**上記はa/b/c/frm.htmlじゃなくてa/b/c/d/frm.htmlでした。
<?php ?>は記載されてない静的なただのhtmlでした。test/css/style.css
css
1.test1 { 2position:relative; 3width:100%; 4height:0; 5padding-top:40%; 6} 7.test1 iframe{ 8position:absolute; 9top:0; 10left:0; 11width:100%; 12height:100%; 13} 14.left a{ 15color: ##FF0000; 16} 17.right a{ 18color: #0000FF; 19}
追記１：
上記CSSの.test1 と.test1 iframeは親ページから見えてるため機能してます。
.left aと.right aは全く動いてません。
４. 聞きたいこと
・Chromeデバッグで見たらiframe部分が<html><head></head><body>...となっていて、<head>タグはありますが、中身は空で何も書いてありません。
試した方法が正しく機能していればこの<head>内にtest/css/style.cssへのリンクが書かれているのでしょうか？
空なのはcssが認識されていないからですか？
・iframeで直接htmlを呼ばずに、htmlを呼んでるphpを呼んでいる（iframeで呼んでるphp内でhtmlをrequireしてる）とこの方法は使えないのでしょうか？
・どこからうまくいってなくて想定通り動かないのでしょうか…
index.htmlに記載したJQueryが機能してなくてfrm.htmlからstyle.cssが見えてない？
JQueryは機能してるが、iframeでphpを一度挟んでるため実行不可能？
CSSを変更したり、JQueryで直接cssを変える方法？を使ってみたり自分なりに試行錯誤してみたのですが、JSもJQueryもほとんど使ったことないしどこからうまくいってないのかよくわかりません。
ご教授ください。
回答2件
0
ベストアンサー
別の方法で（SSIのinclude）実装することにしました。
結局質問した内容の解決策は見つけられませんでした。
質の低い質問ですみません。
回答いただいた方ありがとうございました。
投稿2021/07/08 02:23
退会済みユーザー
総合スコア0
0
ご自身の管理下にあるなら元のページに直接書けばいいし、
管理外なら無理かもしれません
参考までに
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('iframe').addEventListener('load',e=>{ 4 const link=Object.assign(document.createElement('link'),{"href":"sample.css","rel":"stylesheet"}); 5 e.target.contentWindow.document.querySelector('head').appendChild(link); 6 }); 7}); 8</script> 9<iframe src="sample.php"></iframe>
投稿2021/07/05 04:32
総合スコア116724
PC/スマホの切り替えだとCSSのメディアクエリで対応した方がよいかもしれません
メディアクエリ調べてみたのですが、これはiframeの枠サイズに適用する感じでしょうか？
一応css/style.cssの.test1 に記載した内容で枠のレスポンシブ化は成功したのですが、iframe内のタグたちをスマホ用CSSに変更したかったので、今回使うのは厳しそうです。。
でもメディアクエリ便利そうなので覚えておきます。
教えていただいてありがとうございます。
よくよく試行錯誤しだした最初を思い出したら、PCページではfrm.htmlをiframeではなく、#includeで読み込んでたのですが、これはこれで全くわからなかったしスマホページではincludeが動作させられなかったので、こっちの方がまだわかるかと思い、iframeにしたのを思い出しました。
なので、PC用をスマホ用にCSSだけ書き換えるというのは言い方が悪かったかもしれません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。