I have a site with embedded google documents. The documents have links to other pages on the same site. The documents are embedded using the embed code from the google document sharing, for example
<iframe src="https://docs.google.com/document/d/1Rvul_FZYcdJEXFu8fRG5TB2cYgD-RFeiBuWbN44z5Gg/pub?embedded=true"></iframe>
I modify this slightly to
<iframe src="https://docs.google.com/document/d/1Rvul_FZYcdJEXFu8fRG5TB2cYgD-RFeiBuWbN44z5Gg/pub?embedded=true" seamless width=600 height=1000 ></iframe>
If that is all I do then clicking on the links in the document, open the link inside the iframe, this then shows an entire webpage inside the iframe.
I did a lot of research and came up with the following code:
<iframe id="google-doc-iframe" srcdoc="" style="height: 1050px; margin: 0 auto;" align="middle" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$.get("https://docs.google.com/document/d/1jcff6ihstj6aRVy_ojLir8briyW8afHyBYboZwCwUrY/pub?embedded=true", function(html) {
$("#google-doc-iframe").attr("srcdoc", html);
setTimeout(function() {
$("#google-doc-iframe").contents().find('a[href^="http://"]').attr("target", "_parent");
$("#google-doc-iframe").contents().find('a[href^="https://"]').attr("target", "_parent");
}, 1000);
});
});
</script>
This code worked fine, by using ajax to replace the link target attribute to the parent page.
Problem is that it doesn't work in IE 11. The following error is generated: SEC7118: XMLHttpRequest for https://docs.google.com/document/d/1jcff6ihstj6aRVy_ojLir8briyW8afHyBYboZwCwUrY/pub?embedded=true required Cross Origin Resource Sharing (CORS).
I have looked for solutions to this, however my understanding of the code is limited and nothing I do seems to work.
Has anyone got any ideas for modifying my ajax script to work with CORS?