import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import WebView from 'react-native-webview';
const HTML = `
iframe test
`;
type Props = {};
type State = {
backgroundColor: string,
};
export default class Injection extends Component {
state = {
backgroundColor: '#FF00FF00'
};
render() {
return (
{}}
/* We set this property in each frame */
injectedJavaScriptBeforeContentLoaded={`window.self.colourToUse = "orange";`}
injectedJavaScriptForMainFrameOnly={false}
/* We read the colourToUse property in each frame to recolour each frame */
injectedJavaScript={`window.self.document.body.style.backgroundColor = window.self.colourToUse;`}
/>
This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').
Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.
1) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'orange' as the "colour to be used".
2) At injection time "afterContentLoaded", that variable will be read, and thus the colour orange will be injected into all frames.
✅ If the main frame, iframe_0, and iframe_1 all become orange, then multi-frame injection is supported and both injection times are supported.
❌ If no frames become orange, then only one (or neither) of the injection times are supported, or even injection into the main frame is failing.
❌ If only the main frame becomes orange, then multi-frame injection is not supported.
);
}
}