使用單獨的JS文件替換第三方iframe中的文本

我有一個網站使用來自iframe中顯示的第三方的內容。第三方允許將CSS或JS文件上傳到他們網站的頭部，這樣我就可以改變iframe中內容的外觀。無法更改文件在其末尾加載的位置（例如將所有JS文件移動到主體之後）。使用單獨的JS文件替換第三方iframe中的文本

這是問題：我試圖改變一個div的文本，我無法通過我的JS文件做到這一點。

<div id="exampleText"> 
    There's nothing here! 
    <span>Try again at 4:00</span> 
</div>

我知道，我可以使用.html或.innerHTML甚至nodeType === 3，並設置nodeValue更換內容。放置在頁面的瀏覽器控制檯裏面的時候，這裏是上能夠正常工作的方法之一：

jQuery(document).ready(function ($) { 
    document.getElementById('exampleText').innerHTML = 
    "Sorry, you're too early!<span>Check back one hour before class starts</span>"; 
});

然而，當我把這個我的JS文件中，並刷新頁面，我得到一條錯誤：

Uncaught TypeError: Cannot set property 'innerHTML' of null(…)

爲什麼當它通過瀏覽器控制檯放入頁面內時，卻不能從文件內放入頁面？這是由於JS運行之後的網站加載？我怎樣才能解決這個問題，用我自己的內容替換文本？

來源

2016-12-08 cul8r

什麼是您的網頁的網址？什麼是IFRAME的URL？如果它們在同一個域中，您只能修改IFRAME。 – jordiburgos

你可能會遭受同樣的來源政策。請參見https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy，其中說：「同源策略限制從一個來源加載的文檔或腳本如何與另一來源的資源進行交互起源。這是隔離潛在惡意文件的重要安全機制。「這是一個通過設計策略，當幀的來源不同時，瀏覽器開發人員專門保護跨幀DOM更改。它在控制檯中工作的原因是因爲它不是腳本化的 - 您必須手動執行此操作。 –

我已經使用相同的JS文件替換之前來自同一網站的其他iframe上的內容，因此我不確定爲什麼這一頁是唯一受CORS影響的頁面。該文件不在我的網站上託管，並在iframe內運行。在我看來，內容沒有加載之前，JS運行導致空錯誤，但我不知道如何檢查這個或稍後從頭部運行它。 – cul8r

我找不到通過JS輕鬆完成此操作的方法，但我可以用CSS代替內容。以下是我如何管理它：

#exampleText { 
    text-indent: -9999px; 
    line-height: 0; 
} 

#exampleText span, 
#exampleText span:before { 
    text-indent: 0; 
    line-height: initial; 
} 

#exampleText span:before { 
    content: "Sorry, you're too early!"; 
    display: block; 
    font-weight: 700; 
}

此方法允許我保持跨度文本相同，而僅更新沒有周圍元素的內容。

來源

2016-12-09 20:17:06 cul8r

使用單獨的JS文件替換第三方iframe中的文本

回答

相關問題