Jump to content

How to access Square space web page content from an Iframe

Recommended Posts

hi 

I am displaying other web site content inside an iframe in my squarespace home page with below code

<iframe frameborder="0" name="Live Chat" width="100%" height="300" src="https://example.com" allowfullscreen="yes" scrolling="yes"></iframe>


I need to access square space home page element (span) which i have added through code block like below

<span id="chat-component"></span>

But when i try to access the span element by using a function inside my https://example.com it does not allow me to do that. gives me CORS error 

this is the complete code i have used for the above scenario 

// complete code placed inside squrespace home page via code block 

<span id="chat-component" style="width : 400px;
  z-index : 9999;
  position: fixed;
  right:10px;
  bottom:0 !important;
  padding: 10px;
  border-radius: 10px;"></span>
// above element will place on bootom of the squarespace page
<iframe frameborder="0" name="Live Chat" width="100%" height="300" src="https://example.com" allowfullscreen="yes" scrolling="yes"></iframe>

 

/********************************* ANGULAR Implementation *****************************/
//on click of a button
// trying to accesss the content outside ifram
const parentEl =  window.parent.document.getElementById('chat-component');

// Get a reference to the Angular component's factory
const factory = this.componentFactoryResolver.resolveComponentFactory(ChatComponent);

// Create a new instance of the component
const componentRef = factory.create(this.injector);

// Attach the component to the view
this.appRef.attachView(componentRef.hostView);

// Append the component's element to the parent element (squarespace home page span element )
parentEl.appendChild(componentRef.location.nativeElement);


Above code segment gives me an CORS error below

VM582:1 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
    at <anonymous>:1:15
(anonymous) @ VM582:1

Can anyone help to resolve above error or please advice on alternative way to address business requirement 
 

Link to comment
  • Replies 0
  • Views 253
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.