Làm cách nào để nhúng iframe trong ứng dụng PhoneGap?

Question

Có trang web lập lịch đáp ứng hiển thị chế độ xem di động khi trên điện thoại. Tôi muốn hiển thị trang web này trong div PhoneGap của tôi theo cách đó tôi có thể giữ tiêu đề và điều hướng của mình. Mã iframe thông thường có vẻ không hoạt động đối với tôi. Ai đó có thể cho tôi một gợi ý về cách để có được điều này làm việc như trong ảnh chụp màn hình dưới đây.

Dưới đây là những gì tôi hiện có:

<div id="set" title="Set Appointment" class="panel"> 
      <iframe width="320px" height="480px" src="http://google.com"></iframe> 
    </div> 

Answer 1

này hoạt động:

<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;"> 

Thiết lập chiều cao và chiều rộng đến 100% đầy div chứa.

LƯU Ý: Nếu bạn cố gắng để nhúng một iframe sử dụng một trang web mà chỉ có thể được hiển thị trong một khung về nguồn gốc giống như trang đó, các thanh tra viên web sẽ ném lỗi dưới đây:

từ chối để hiển thị 'https://www.google.com/' trong một khung vì nó đặt 'X-Frame-Options' thành 'SAMEORIGIN'.

Với điều đó đã nói, www.google.com và một số iframe được nhúng của trang web khác sẽ luôn trống. Tôi hi vọng điêu nay se giup được ai đo.

Answer 2

Vâng, bạn có thể kiểm tra điều này question khác vì bạn có thể bắt gặp một số vấn đề khi sử dụng iframe trên quan điểm thiết bị web điện thoại di động, nếu bạn muốn những hai div là tất cả các thời gian trên botton và đầu trang, bạn chỉ cần css để làm như vậy:

.topheader { 
    position:fixed; 
    bottom:0; 
} 

và như vậy .. tôi hy vọng nó không hel p bạn, tất nhiên bạn cần phải thực hiện các vị trí div quyền

Answer 3

Tôi đã gặp vấn đề tương tự và tôi đã thực hiện nó với giải pháp của riêng mình tôi đã sử dụng smartzoom. Khung nội tuyến không thể được đưa ra 100% chiều rộng và chiều cao bạn phải cung cấp cho pixel vì vậy tôi đã sử dụng smartzoom nó sẽ tự động phù hợp iframe để chứa chiều cao và chiều rộng. Bạn có thể điều chỉnh mã theo nhu cầu của bạn, heres jsfiddle

<div id="viewsites" class="viewsites"> 
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe> 
</div> 

Answer 4

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> 
    Your browser doesn't support iframes 
</iframe>