1

For context, I am designing an Ionic mobile app for my website. However, I don't believe that this question is limited to the Ionic framework.

Within my app, I want to display a full-width, full-height iframe loading one of the pages from my website. This is straightforward enough:

<iframe id="myFrame" src="https://example.com/" style="height:100%;width:100%"></iframe>

However, I now want to be able to "trim" or "hide" content from the iframe (something similar to this example). In one iframe, I want to trim out just the navbar (a particular named div). In another iframe, I actually want to trim out everything that is NOT within a particular named div within the page.

I have seen this done using the jQuery "load" function for sites within the same domain. However, with the app I am pretty sure I need to treat the iframe source as a separate domain, even though I own the site and the app is designed to access the site.

I saw what looked like a promising answer here using jQuery Ajax, but I need some more pointers to execute it.

Any tips on how to do this would be appreciated!

Improve this question

2 Answers 2

Reset to default
1

I don't believe this is possible between sites of different origins. The chief problem with the proposed approach is not CORS but cross-site scripting. However, it is possible to use postMessage() to send a message from the parent window to the iframe, executing a javascript code hidden in the iframe source. This javascript can then manipulate the elements within the page.

This is the solution that I ultimately got to work:

Parent window

var frame = document.getElementById('myFrame').contentWindow; sendMessage = function(e) { frame.postMessage('secret command', 'https://endpoint.com'); } <iframe data-tap-disabled="true" id="myFrame" src="https://endpoint.com/index.php" onload="sendMessage()"></iframe>

Child (page loaded in the iframe) contains this script:

<script> window.onload = function() { // A function to process messages received by the window. function receiveMessage(e) { if (e.data == "secret command") //put code here to maniuplate page elements however desired else return; } // Setup an event listener window.addEventListener('message', receiveMessage); } </script>

The end product is that the page loaded in the iframe can be displayed in a certain way depending on the command passed from the parent window. For my use, the page loaded in the iframe hides the navigation bars only when loaded from within my app.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This definitely possible however you will bump into CORS issues so that is something that you need to keep in mind. You must keep in mind that none of the scripts or includes will be added so for the best experience host this on a page that loads all of your scripts and includes before you run this. You can see a super basic example here however you will get a CORS error so to see it working you will need to install the chrome CORS plugin and activate it.

You will see that the call is very simple

$('#test').load('https://stackoverflow.com/questions/50955345/manipulate-iframe-from-a-different-domain #question');

use the # tag to indicate the id of the content to load. So if you want to load the div with the id of 'MySuperCoolAndInterestingDiv' you just add ' #MySuperCoolAndInterestingDiv' to the end of you URL, the space between the URL and the hashtag are important, don't forget it.

Improve this answer

6 Comments

Greetings. I can get your code to work with the CORS plugin, but the question is A) how can I chop out a div (still getting errors even when the site is from the same domain! link and B) how do I only display one div BUT preserve the formatting? Is there a way to load the whole page and scripts into a hidden variable and only display the div in question? Or how can I load all of the scripts for the page so the div preserves proper formatting?
Are both of the pages loading from your domain? CORS is going to be a real pain in the butt with this requirement. If both pages are loaded from your domain then it would be easier to just create a smaller page that only displays the information you want with its styles and then just load it into an iFrame. To preserve the style in the div is going to be a nightmare and require writing a lot of specific css to target the elements inside your div.
No, the page which will load the website in an iframe will be hosted within an Ionic mobile app. Would this make it "origen: null"? I was told CORS issues that pop up in testing on Chrome shouldn't be an issue with the web pages hosted within the actual app.
So your page (lets call it index.htm), inside your Iconic mobile app, will load another page from some site (lets say theirsite.com/info.htm)? and you only want a certain div from theirsite.com/info.htm to render inside index.htm but retain all the styles from theirsite.com?
That is correct. Is there a script or method to load all CSS styles and scripts from the iframe site?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.