iframe and text sharing

Question

Hi,

I have a html page (parent page) that has an iframe which displays some text information. How can I share this text content using tweet@rama and socialite because the text is inside the iframe not on the parent page.

 

Answer 1

Assuming that the page in the iframe is running in the web context (ms-wwa-web://) and therefore cannot access WinRT APIs, then your best approach would be to postMessage that text content to the parent page (use window.parent.postMessage inside the iframe), so that parent page can cache it on behalf of the iframe.

The parent page (your app), would then pick up the data requested event for sharing, and use that cached text as the share source.

.Kraig

Answer 2

hi Kraig,

I dont have any concept of parent page cache. Seems like it will be tough for me. I only know text sharing using id of html element <p> so I want to use a much simpler 2 step approach. I want to post my iframe text to my parent. Then I will do text sharing later from parent page.

Can you give me example of posting text(using window.parent.postMessage) from a paragraph inside iframe eg:

<p id="iframetext">text in iframe that i want to send to parent</p>

to a paragraph on parent page eg:

<p id="parentparagraph"></p>

 

Answer 3

In the iframe (assuming the web context), you'd send the text from your element to the parent as so:

//Sending a message to the app
var messageString = document.getElementById("iframetext").innerText;
window.parent.postMessage(messageString, "ms-wwa://" + document.location.host);

In your app (local context), you'd pick up the message like so:

window.addEventListener("message", processFrameMessage);

function processFrameEvent(message) {
    if (!message.data) {
        return;
    }

    //Process the message as you want
    document.getElementById("parentParagraph").innerText = message.data;
};

That is, message.data will contain what messageString did in the iframe.

 

To go the other direction, you do something similar. In the app (local context), assuming "idFrame" if your iframe element:

var myMessage = document.getElementById("parentParagraph");
var frame = document.getElementById("idFrame");
frame.postMessage(myMessage, "ms-wwa-web://" + document.location.host);

 

 

In the iframe you pick that message up like so:

window.addEventListener("message", processAppMessage);

function processMessage(message) {
    if (!message.data) {
        return;
    }

    //Process the message as you want
    document.getElementById("iframetext").innerText = message.data;
    }

.Kraig

Answer 4

Thanks Kraig!