聚合物設計師和<iframe>

Question

我試圖在聚合物設計器（https://polymer-designer.appspot.com/）中放入iframe，但它不會顯示任何帶有「http」和其他網站（如「google」和「youtube」）的網頁，我不知道如果有什麼辦法可以解決這個問題，但是如果你們中的任何一個人有一個想法如何解決這個問題，我全都是耳朵。

Answer 1

要插入成一個元件與聚合物Designer中：

1. 打開聚合物設計與HTTP（http://polymer-designer.appspot.com/）（在步驟3加載）。
2. 點擊左上角的<>進入代碼視圖。

3. 在<template>標籤內，添加您的。它應該是這樣的：

   <polymer-element name="my-element"> 
       ... 
       <template> 
       <iframe src="http://www.w3schools.com/"></iframe> 
       </template> 
   </polymer-element> 
   

注：

• 聚合物設計師已經有一段時間沒有更新了，並且它使用過時的聚合物版本元素不再相關。我建議遵循Polymer docs開始使用最新版本的Polymer（1.4.0）。

• 如果你打開你的瀏覽器控制檯，而在聚合物設計，你會看到錯誤消息，當您嘗試使用一個來google.com或youtube.com：

  拒絕在一個框架，因爲顯示「https://www.google.com/」它將'X-Frame-Options'設置爲'SAMEORIGIN'。

  拒絕在框架中顯示'https://www.youtube.com/'，因爲它將'X-Frame-Options'設置爲'SAMEORIGIN'。

  此錯誤表明服務器不允許在其域以外的中加載資源（有關更多詳細信息，請參閱this answer）。

• 瀏覽器控制檯日誌也將告訴你關於HTTP錯誤：

  混合內容：在「https://polymer-designer.appspot.com/」加載頁面通過HTTPS，但要求一個不安全的資源「http://www.w3schools.com/」。此請求已被阻止;內容必須通過HTTPS提供。

  要解決這個問題，你可以改變 URL中使用HTTPS （如果服務器允許），以適應當前的協議，或者乾脆從HTTP（http://polymer-designer.appspot.com/）訪問設計師。