ホームページ  >  記事  >  ウェブフロントエンド  >  js クロスドメイン問題 クロスドメイン iframe アダプティブ サイズ実装 code_javascript スキル

js クロスドメイン問題 クロスドメイン iframe アダプティブ サイズ実装 code_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 18:22:591301ブラウズ
コードをコピー コードは次のとおりです。


<script> <br>function setHeight(){ <br>var dHeight = document.documentElement.scrollHeight; <br>var t = document.createElement("div"); <br>t. innerHTML = ' <iframe id="kxiframeagent" src="http://rest.kaixin001.com/api/agent.html#' dHeight '"scrolling="yes" height="0px" width="0px"&gt ;< /iframe>'; <br>documentElement.appendChild(t.firstChild); <br><br> <br> を解決する方法を考えていました。後でインターネットで検索した後、私は次のようにコピーしました。</div> <br><br><br>質問: <br><br> <br>ドメイン名 A のページ a.htm は、iframe を介してドメイン名 B のページ b.html に埋め込まれます。b.html のサイズは予測不可能で変化するため、iframe 適応型です。 <strong><br></strong>問題の本質: <br> <br><br>の iframe のサイズを制御するためです。 a.htm では、まず b.html のサイズを読み取る必要があります。A と B は同じドメインに属していません。js のアクセスは制限されており、b.html のサイズは読み取ることができません。 🎜>解決策: <strong> </strong><br>まず前提として A 、B は協力関係、b.html は A が提供する js を導入できます <br><br> まず、a.html を導入しますb.html iframe 経由 <br><strong></strong><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<div class="codetitle"> <span> <a style="CURSOR: pointer" data="56665" class="copybut" id="copybut56665" onclick="doCopy('code56665')">&lt ;iframe id="aIframe" height="0" width="0" src="http://www.b.com/html/b.html" Frameborder="no" border="0px" marginwidth="0 " marginheight="0"scrolling="no" allowedtransparency="yes" ></iframe> <u><iframe id="aIframe" height="0" width="0" src="http:/ /www.b.com/html/b.html"frameborder="no" border="0px" marginwidth="0" marginheight="0"scrolling="no"allowtransparency="yes" ></iframe> </u></a> </span>B は、A が提供した js ファイルを b.html に導入しました</div> <div class="codebody" id="code56665">HTML コード<br><br><br> </div> <br>コードをコピー<br><br><br> コードは次のとおりです:<div class="codetitle"><span> <a style="CURSOR: pointer" data="34639" class="copybut" id="copybut34639" onclick="doCopy('code34639')"><script language=" javascript" type="text/javascript" src="http://www.a.com/js/ a.js"></script> js は最初に b .html の幅と高さを読み取り、次に iframe を作成します。src は、同じドメイン内の中間プロキシ ページ a_proxy.html です。 A、読み取り幅と高さをsrcのハッシュに設定します
HTMLコード



コードをコピー


コードは次のとおりです。次のように:
a_proxy.html は、ドメイン A で提供される優れた中間プロキシ ページです。幅と高さの値を読み取る役割を果たします。 location.hash で、同じドメインの下の a.html で iframe の幅と高さを設定します。
Js code



コードをコピーします


コードは次のとおりです:
var pParentFrame =parent.document.getElementById("aIframe"); var locationUrlHash =parent .parent.frames["aIframe"].frames["iframeProxy"].location.hash; pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0 ] "px"; pParentFrame.style.height = locationUrlHash.split("#")[1].split("|") [1] "px"; .getElementById("aIframe"); var locationUrlHash =parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash.split(" #")[1].split("|")[0] "px";
pParentFrame.style.height = locationUrlHash.split ("#")[1].split("|")[1] "px";


この場合、 a.html の iframe は b.html の幅と高さに適応します。

他の同様の JS クロスドメイン操作の問題が発生する可能性があります。このアイデアに従って解決することもできます
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。