2

I have a web component which another group wants to include in their web application.

They have asked that I render my page into theirs by rendering into a div. From my understanding they are going to provide an html page similar to this.

TheirComponenetPopupWindow.html

<html>
...
<script src="myscript.js"></script>
...
<div id='render_here'></div>
</html>

where myscript.js will be a script I will need to write.

Now, I have seen countless examples on stackoverflow where I can use $(#render_here).load(..) or $.ajax(..,{..}). However, all of these leave me with a serious problem. That all resources my page loads are now relative to the page I am being rendered into. This off course breaks my page as all of my scripts, images, and css files fail to load.

Is anyone aware of how I can use the methods mentioned above, or maybe a method I am unaware of, where I can render into a div and not break my resources?

1
  • 1
    iFrame sounds as solution. You'll call all resources as you're calling now May 16, 2015 at 8:15

2 Answers 2

3

You can try to create a iframe in the render_here div, and set the src of iframe with you page url.

1
  • This is inline with what I was thinking. My only concern is they are injecting functions into the global space of their html page. I am just thinking out loud, but I could still access those internally as window.parent.function.
    – Freddy
    May 16, 2015 at 8:19
1

You will need rewrite your code using absolute URLs if you want them to be portable to other locations such as a third party's site.

If you don't require interaction between your code and content on the third party page then an iframe would probably save you a lot of time and effort, but access to the third party's page would be prevented from within the iframe.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.