I am trying to embed a URL in my React application using an iframe. But on the URL in iframe i am getting "xxxx site redirected you too many times" issue in the browser. Please find below code for reference.
Can anyone please guide me how to resolve this issue.
function App() {
const iframeUrl="https://example.org/";
const iframeid = "iframe";
return (
<div >
<iframe src= {iframeUrl} id={iframeid}></iframe>
</div>
);
}
It's the binding Error you're not binding src={iframeUrl} and id={iframeid} and also check they have proper values too.
Related
I want to adjust google login api(GSI) redirect mode. If api complecated, redirect the url to "http://localhost:3000/oauth", post credential token to backend and redirect to "http://localhost:3000".
Here is my code.
<div
id="g_id_onload"
:data-client_id="googleClientId"
data-ux_mode="redirect"
data-auto_prompt="false"
:data-callback="getGoogleLoginCallback"
style="z-index: 100000000000000000"
></div>
<div class="g_id_signin"></div>
After the page redirected and i clicked my account, i got the error http://localhost:3000 is
How can i get page?
I can't find anything method to solve problem
From the docs you can can see that if you doesn't provide data-login_uri attribute, google will redirect to same page where you clicked the login button, if you are planing to post the credintial JWT after login to http://localhost:3000/oauth then the html must be like this
<div
id="g_id_onload"
:data-client_id="googleClientId"
data-ux_mode="redirect"
data-auto_prompt="false"
data-login_uri="http://localhost:3000/oauth"
:data-callback="getGoogleLoginCallback"
style="z-index: 100000000000000000"
></div>
<div class="g_id_signin"></div>
I am not recommending this way of using html in your Vue app, this may not work if the component containing this html is mounted after the library is loaded
Instead Use renderButton function
Instead you can use google.accounts.id.renderButton function to dynamically create a Login Button.
Or Use a Plugin Instead
You can easily do the same using this Vue 3 plugin vue3-google-login which I recently created for easily integrating Login With Google feature in your Vue 3 application, all you need to do is initialise the plugin in main.js with your client id then use the component GoogleLogin like this
<script setup>
const idConfiguration = {
login_uri:'http://localhost:3000/oauth',
ux_mode:'redirect'
}
</script>
<template>
<GoogleLogin
:idConfiguration="idConfiguration"
/>
</template>
I am trying to embed twitch streams in a react app and am struggling how to figure out how to get props to work in an iFrame call.
In my app.js I have a call such as,
<Stream name="streamname" />
In stream.js I have,
<iframe
src={"https://player.twitch.tv/?channel=" + { ... this.props } + "&parent=localhost"}
height="540"
width="960"
allowFullScreen={false}
frameBorder="0" >
</iframe>
when src is set to "https://player.twitch.tv/?channel=channelname&parent=localhost" everything works fine as expected. Its just when I try to add the props is when things get messed up.
For example the embedded link that is created is https://www.twitch.tv/[object%20Object]/
Colin your question is not much clear what you wanna achieve, please
you can use template literals it is better way to combine string and variables
src={
`https://player.twitch.tv/?channel= ${ this.props.name }&parent=localhost`
}
what is coming in this.props that you are spreading
I am working in Microsoft Framework to create an application customizer which can only contain html code as a string. I created the html I want to render and need to add some functionality to open a link via a javascript method givien by Microsoft Teams. The main problem though is that it fires directly. I usually add an addListener to the method, but since it has to be HTML in a .ts file I cannot do that. So I am wondering except for that method what else would prevent the browser from triggering my openLink function from executing immediately.
I also cannot use React code where it would be as simple as onClick={() => sth(1)}.
My Code:
private _renderTopBar(navData, context) {
const { logoUrl, navigation } = navData;
let logo = logoUrl.replace('-my', '');
function openLink(url) {
console.log('got executed...')
}
return `
<section class="${styles.top}">
<div class="${styles.headerRow}">
<div class="${styles.mainHeader}">
<div class="${styles.logoCell}"><img src="${'https://one365demo.sharepoint.com/:i:/r/Style%20Library/hublogo.png'}" /></div>
<div class="${styles.titleCell}">
Start
</div>
</div>
</section>
`;
}
Any help would be much appreciated. Cheers!
I'm trying to use a script from Tock in my Gatsby website which converts a "Reserve" button into a widget.
I have tried many different ways suggested here to make this work including the methods listed in this answer.
If I put the script in the component as shown below or in html.js, the code works but only if I refresh the page. If I navigate to the page from another page, it doesn't work.
If I place in an external JS file I get compiling errors.
What I thought should be simple is providing incredibly challenging so any help is greatly appreciated! Thanks
class ReserveTock extends React.Component {
render() {
return (
<>
<script dangerouslySetInnerHTML={{
__html:`
!function(t,o,c,k){if(!t.tock){var e=t.tock=function(){e.callMethod?
e.callMethod.apply(e,arguments):e.queue.push(arguments)};t._tock||(t._tock=e),
e.push=e,e.loaded=!0,e.version='1.0',e.queue=[];var f=o.createElement(c);f.async=!0,
f.src=k;var g=o.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g)}}(
window,document,'script','https://www.exploretock.com/tock.js');
tock('init', 'websitename');
`}}
/>
<a className = {"btn " + this.props.buttonColor + ' ' + this.props.className}
href="https://www.exploretock.com/websitename"
data-tock-reserve="true"
data-tock-experience={this.props.experienceTockId}
>
Reserve
</a>
</>
)
}
}
In my experience: third party scripts that you load into your page need to go as high up in the HTML as possible. So put the script tag directly in the HTML head, don't inject it with JavaScript :)
I am developing an angular mobile APP, where i wanted to go tho the specific url for eg: www.google.com on clicking of a particular div. but i am not able to do that as i am new to this angular world.
<div ng-click="goToGoogle('www.google.com');" class="" id="">
<p class=""><span class="">Go to Google Full Web Site</span></p>
</div>
In controller Function
$scope.goToGoogle = function (url) {
$scope.$apply( $location.path(url) );
}
Please help me to do that.Thanks in advance for any help.
In your controller, have you passed in the $location service along with the scope?
UPDATE
Try passing the $window service.
$window.location.href = url;
You don't even have to use $scope.apply for it.