iframe 自適應高寬度 例:google map

高度
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>
寬度
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe>

Example:

<div align=center><iframe name="myframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.4737972723406!2d121.46244851484161!3d25.01799018397986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a81762728291%3A0x4b2b0a7b409da2aa!2zMjIw5paw5YyX5biC5p2_5qmL5Y2A5paH5YyW6Lev5LiA5q61MTAw6Jmf!5e0!3m2!1szh-TW!2stw!4v1573006302185!5m2!1szh-TW!2stw" frameborder="0" scrolling="auto" width="100%" height="400" οnlοad="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe></div>

閱讀更多 »

[Issue] 手機網頁的iframe呈現空白

當遇到網頁中嵌入iframe內容卻不能顯示的時候，請試下以下的方法 1. iframe格式將src放到最後面 2. 在iframe內加入allowfullscreen webkitallowfullscreen msallowfullscreen

閱讀更多 »