0

in html file i can make

<h1> the following page is google page </h1>
<pageElement linkForThePage='google.com'/>

how can I open any page inside the marginal page without leaving it? is there an HTML element that do this. in case you did not understand what I mean: I want to open other pages like google authentication as a component (like opop up but I don't want to make a popup) in my original page.

Ali Husham
  • 816
  • 10
  • 31

1 Answers1

0

UPDATE: I had come up with the iframe approach to load a website within the component. However, all the websites with authentication pages like google, facebook will block framing.

You need to use iframe within your Component That you wanted to link to.

 const MyWebSite = ({siteName})=>{
  return(
   <iframe src={siteName} title="My Site Name">
   </iframe>
   )
 }

Then from Parent Component Use this Component.

<MyWebsite siteName="https://aperfectplate.co/" />

Update: While the above website will work and food app is loaded.

Codesandbox: https://codesandbox.io/s/iframe-example-nihyh?file=/src/App.js

But authentication websites will not be loaded within the component with the above approach. For example if you try below code. It wouldn't load google.com.

<MyWebsite siteName="https://www.google.com/" />

That's what I feel can be done. You may improve it later using React Router. You can make it behave like a link also. This idea could be used to build on top of :)

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
  • That won't work. Google (and Google authentication) block framing. – Quentin Dec 25 '20 at 10:46
  • Is it. I mean the questioner simply wants to know way in a SPA. We don't have to specifically use google.com – Imran Rafiq Rather Dec 25 '20 at 10:47
  • Quoting the question: "I want to open other pages like google authentication as a component". You **do** have to specifically use google.com – Quentin Dec 25 '20 at 10:48
  • Like google :) is mentioned. Leave google aside ... What about general scenario Dear Quentin :) Even I want to learn. There is no shame learning – Imran Rafiq Rather Dec 25 '20 at 10:49
  • In the general case, most pages **like** google authentication will block framing because they are authentication pages and authentication pages generally block framing. – Quentin Dec 25 '20 at 10:50
  • And the question is focusing on a subset of them and gives a specific example. – Quentin Dec 25 '20 at 10:53
  • What about the title of the question :) – Imran Rafiq Rather Dec 25 '20 at 10:53
  • The title is supposed to be a short summary of the problem. There isn't room to put all the nuances of the problem in it. The body provides additional detail. That is why you shouldn't ignore the body of the question and answer the title alone. – Quentin Dec 25 '20 at 10:56
  • Sure Mate. Iframe don't support in general. Authenticated sites will not load in iframe and will block it ... Thanks for your advise :) – Imran Rafiq Rather Dec 25 '20 at 10:58
  • Shall I update my Answer and include the authentication issue there also – Imran Rafiq Rather Dec 25 '20 at 11:00
  • @Quentin : Respected Quentin, Please have a look at my updated answer. Could it help anyone in future :) If yes then I'll keep this answer. If not I will delete it, as I don't want answers that aren't helpful for developers :) Thank U – Imran Rafiq Rather Dec 25 '20 at 11:13